kristycarlton

That video was really helpful! I found the problem, but I’m not sure how to fix it.

The div id is listed as “main” and the class as “site-main.”

When I change it to div id “nav” and role “navigation” it works.

Can you tell me where or how to change div id and role in the css file?

Thanks again!

I do have jQuery installed.

Here’s the child theme css style sheet I created. Can you please help me find what’s causing the problem?

/*
Theme Name: twentythirteen-child
Theme URI: http: //hhpcommunities.com/strikingabalance5e/
Description: This is a custom child theme I have created.
Author: Kristy
Author URI: http: //mysite.com/
Template: twentythirteen
Version: 0.1
*/

@import url(“../twentythirteen/style.css”);

/*
============================================================
Custom CSS –
============================================================
*/
.site {
background-color: #fff;
margin: 0 auto;
max-width: 1600px;
border: 1px solid #483175;
}

.site-main {
position: relative;
}

.site-main .sidebar-container {
height: 0;
position: absolute;
top: 40px;
max-width: 1080px;
z-index: 1;
}

.site-main .sidebar-inner {
margin: 0 auto;
max-width: 1080px;
}
.hentry {
padding: 80px 0;
}

.entry-header,
.entry-content,
.entry-summary,
.entry-meta {
margin: 0 auto;
max-width: 1080px;
}

.sidebar .entry-header,
.sidebar .entry-content,
.sidebar .entry-summary,
.sidebar .entry-meta {
max-width: 1080px !important;
padding: 0 40px 40px 40px;
}

.navbar {
background-color: #f1f1f1;
margin: 0 auto;
max-width: 1600px;
border-top: 1px solid #483175;
border-bottom: 1px solid #483175;
}
.site-header .search-field {
display: none;
}
.page .entry-title {
display: none;
}
.comment-respond {
display: none;
}
body {
margin-top: 5px;
margin-left: 10px;
font-family: Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
font-family: Calibri, sans-serif;
line-height: 1.5em;
}
h1 {
color: #483175;
font-size: 24px;
}
h2 {
color: #0093a5;
font-size: 22px;
}
h3 { font-size: 20px; }

h4 { font-size: 18px; }

h5 { font-size: 16px; }

h6 { font-size: 14px; }

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
margin: 0;
padding: 0;
margin-bottom: 0px;
font-family: Helvetica, sans-serif;
}

.entry-title {
color: #483175;
text-align: left;
margin: 0;
padding: 0;
}
.body {
line-height: 2;
}

a {
color: #0093A5;
}

a:visited {
color: #ffc41d;
}
a:hover {
color: #0093A5;
text-decoration: underline;
}
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: ” “; clear: both; height: 0; }

/*
————————————————–
:: HEADER
————————————————–
*/
.nav-menu {
background-color: #f1f1f1;
}
hr {
height: 3px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #CCCCCC;
border: 0;
padding: 0;
}
#footer2 {
text-align: center;
font-size: 1.5em;
}
#fr-site-title-group {
display: inline-block;
overflow: hidden;
float: right;
}

#fr-site-title-group {
margin-left: 11px;
}
#fr-logo {
float: right;
margin: 0 0.6em 0 0;
}

/* ————————————————–
:: CONTENT
————————————————– */
/* Columns Structure */
.column40 {
float: left;
width: 40%;
padding: 0;
margin: 0;
}
.column60 {
float: left;
width: 55%;
padding: 0px;
margin-right: 5%;
}
.no-padding {
margin: 0;
padding: 0;
}
.container {
padding: 0px 30px 10px 30px;
border: none !important;
}
.home-content-wrapper {
overflow: hidden;
position: relative;
background-color: #ffffff;
text-align: left;
}
.content-border {
margin-top: 25px;
margin-bottom: 30px;
border: 2px solid #CCCCCC;
}
ul {
list-style: disc outside none;
margin-left: 0;
padding-left: 1em;
}
li {
padding-left: 1em;
}
.purple {
color: #483175;
}
.orange {
color: #F3921D;
}
.teal {
color: #0093A5;
}
.yellow {
color: #FFC41D;
}
.larger-text {
font-size: 1.2em;
font-weight: strong;
}
/*Make Image Scalable – Assign this class to any image to make it scale with the browser window size*/
.scalable {
height: auto !important;
width: auto !important;
border-radius: 0;
}
.entry-content a,
.comment-content a {
color: #0093a5;
font-weight:bold;
}
.entry-content a:visted,
.comment-content a:visited {
color: #f3921d;
}
.site-header .site-branding {
background-size: cover;
}
/* ————————————————–
:: FOOTER
————————————————– */

.widget a {
color: #483175;
font-weight: bold;
text-decoration: underline;
}

.widget a:hover {
color: #483175;
text-decoration: underline;
}
.site-footer {
background-color: #ffffff;
color: #483175;
font-size: 14px;
text-align: center;
}

.site-footer .widget-area,
.sidebar .site-footer {
text-align: center;
}

.site-footer a {
color: #483175;
font-weight: bold;
text-decoration: underline;
}
.site-footer a:hover {
text-decoration: underline;
color: #483175;
}
.site-footer .sidebar-container {
background-color: #ffffff;
padding: 20px 0;
}

.site-footer .widget-area {
margin: 0 auto;
max-width: 1040px;
width: 100%;
}

.sidebar .site-footer .widget-area {
max-width: 1040px;
position: relative;
left: 20px;
}

.site-footer .widget {
background: transparent;
color: #483175;
float: left;
margin-right: 20px;
width: 1040px;
}
.sidebar .site-footer .widget {
width: 1040px;
}

.sidebar .site-footer .widget:nth-of-type(4),
.sidebar .site-footer .widget:nth-of-type(3) {
margin-right: 0;
}

.site-footer .widget a {
color: #483175;
font-weight: bold;
text-decoration: underline;
}
.site-footer .widget a:hover {
color: #483175;
text-decoration: underline;
}
.site-info {
display: none;
}
/* ————————————————–
:: CUSTOM CSS
————————————————– */

.site-header {
height: 230px;
width: 100%;
margin: 0 auto;
position: relative;
}
.site-header .home-link {
max-width: 1600px;
}
h1 {
color: #483175;
font-size: 24px;
}
h2 {
font-size: 22px;
}
h3 { font-size: 20px; }

h4 { font-size: 18px; }

h5 { font-size: 16px; }

h6 { font-size: 14px; }

/* —————————————————–
::NAVIGATION
—————————————————– */
.main-navigation {
clear: both;
margin: 0 auto;
max-width: 1080px;
min-height: 45px;
position: relative;
}

ul.nav-menu,
div.nav-menu > ul {
margin: 0;
padding: 0 40px 0 0;
}

.nav-menu li {
display: inline-block;
position: relative;
}

.nav-menu li a {
color: #483175;
display: block;
font-size: 18px;
font-weight: bold;
line-height: 1;
padding: 15px 20px;
text-decoration: none;
}

.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus {
background-color: #0093a5;
color: #fff;
}

.nav-menu .sub-menu,
.nav-menu .children {
background-color: #0093a5;
border: 2px solid #483175;
border-top: 0;
padding: 0;
position: absolute;
left: -2px;
z-index: 99999;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}

.nav-menu .sub-menu ul,
.nav-menu .children ul {
border-left: 0;
left: 100%;
top: 0;
}

ul.nav-menu ul a,
.nav-menu ul ul a {
color: #483175;
margin: 0;
width: 200px;
}

ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover,
ul.nav-menu ul a:focus,
.nav-menu ul ul a:focus {
background-color: #0093a5;
}

ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul,
ul.nav-menu .focus > ul,
.nav-menu .focus > ul {
clip: inherit;
overflow: inherit;
height: inherit;
width: inherit;
}

.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
color: #483175;
font-style: italic;
text-decoration: underline;
}

.menu-toggle {
display: none;
}