Twenty Thirteen: Navigation menu not working

  • kristycarlton

    (@kristycarlton)


    10 years, 8 months ago

    I created a child theme based on Twenty Thirteen. The navigation menu was working fine for a while, but suddenly stopped working on the child theme altogether.

    There are four pages that should work as links on the navigation menu:
    Home
    Chapters
    About the Book
    About the Authors

    They are also listed on the nav bar, but they are only showing as text. None of them are active links, and the hover drop-down feature is no longer working either.

    I can’t link to the site, because it is saved on my local directory right now.

    Do you have any ideas of what may have caused this?

    Thank you for your help!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter kristycarlton

    (@kristycarlton)

    10 years, 8 months ago

    I tried deactivating all plugins, and that didn’t resolve the problem.

    paulwpxp

    (@paulwp)

    10 years, 8 months ago

    I tried deactivating all plugins, and that didn’t resolve the problem.

    Does your child theme make use of jQuery or JS? If the answer is no, then the problem is CSS in your child theme that causes the error.

    Thread Starter kristycarlton

    (@kristycarlton)

    10 years, 8 months ago

    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;
    }

    paulwpxp

    (@paulwp)

    10 years, 8 months ago

    I do have jQuery installed.

    Try disable jQuery part of Child Theme and see if the problem is gone, if so then the culprit is in Child Theme jQuery code. If it does not fix the problem, then it’s the Child Theme CSS.

    Debugging CSS is more or less impossible by just reading the code.

    Thread Starter kristycarlton

    (@kristycarlton)

    10 years, 8 months ago

    Thanks again, paulwpxp!

    I already tried deactivating the plugin, and I just tried it again. Navigation still doesn’t work. 🙁

    What would you suggest for debugging the css?

    paulwpxp

    (@paulwp)

    10 years, 8 months ago

    We use Inspect Element, either from Firebug which is a Firefox extention, Firefox also has this built in (right click and choose Inspect element), Chrome also has one (click F12).

    Here is a video tutorial

    Thread Starter kristycarlton

    (@kristycarlton)

    10 years, 8 months ago

    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!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Twenty Thirteen: Navigation menu not working’ is closed to new replies.