hero image

Main Navigation Not Working on Home Page

Home Forums WordPress Themes Megalith Main Navigation Not Working on Home Page

Forums WordPress Themes Megalith Main Navigation Not Working on Home Page

PLEASE NOTE A RECENT CHANGE:
The forum is read-only. Please submit any support request here.

This topic contains 1 reply, has 2 voices, and was last updated by  mihai 2 years, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts

  • tkp113
    Client
    Client
    #73725

    I’m using Megalith to build a site using visual composer. I am admittedly a novice at best.

    I am trying to find out why the navigation for my site doesn’t work on the home page, but works on all the other pages, and it works in the sticky menu on the home page, just not when you first go to the page.

    I have some custom css that seems to be causing the issue, because when deleted, it will work, but I loose some of my styling.

    I have gone through and removed each part of the css hoping to find the issue, but no luck. If it is all removed, the styling of my header is gone, but the navigation works on the home page.

    I know this is an issue with my knowledge of css and php so I’m sorry for the stupid question.

    Thank you,
    Tracy

    Below is my css that I have in custom css:

    body.sticky-header {
    padding: 0 !important;
    }

    .menu-toggle-title {
    display: none;
    }

    .site-footer {
    display:none;
    }

    li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    }

    .main-navigation ul ul li a {
    color: #000
    }

    /* ==================== – Header – ==================== */

    .header-navbar {
    padding: 0;
    border-bottom: 0px solid #009edf;
    font-family: ‘Bitter’, serif;
    }

    .identity {
    padding: 10px 0;
    margin: 0;
    display: table;
    position: relative; }
    .identity * {
    margin: 0; }
    .identity a {
    z-index: 1;
    position: relative;
    max-width: 100%;
    display: inline-block; }

    .main-nav > ul {
    display: none; }
    @media (min-width: 992px) {
    .main-nav > ul {
    display: table; } }
    .main-nav > ul li {
    position: relative; }
    .main-nav > ul > li {
    padding: 25px 0 3px;
    margin: 0 5px; }
    .main-nav > ul > li:last-child {
    margin-right: 0; }
    .main-nav > ul > li:last-child > ul {
    right: 0; }
    .main-nav > ul > li > a {
    padding: 3px 10px;
    display: inline-block;
    }

    .main-nav > ul > .current_page_item > a, .current_page_parent > a {
        background: #009edf;
        color: #000000;
    }
    
    .main-nav > ul > .current_page_item > a:hover, .current_page_parent > a:hover {
        opacity: 0.8;
        color: #000000;
    }
    
    .current_page_parent .current_page_item > a {
        color: #009edf;
    }
    
    .menu .current-menu-item > a {
        background: #fafafa;
        color: #009edf;
        border-left: 2px solid;
    }
    

    .main-nav > ul > li a:hover + ul {
    display: block;
    -webkit-animation: fadeIn 0.8s ease forwards;
    -moz-animation: fadeIn 0.8s ease forwards;
    -o-animation: fadeIn 0.8s ease forwards;
    animation: fadeIn 0.8s ease forwards; }
    .main-nav > ul > li > ul {
    border-bottom: 3px solid #ffffff;
    margin-top: -3px; }
    .main-nav > ul > li ul {
    position: absolute;
    background: #ffffff;
    top: 100%;
    z-index: 33;
    border-top: 0;
    text-align: left !important;
    min-width: 250px;
    max-width: 400px;
    font-size: 0.9em;
    white-space: nowrap;
    text-transform: none;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    display: none; }
    .main-nav > ul > li ul:hover {
    display: block; }
    .main-nav > ul > li ul ul {
    left: 100%;
    top: 0;
    bottom: auto; }
    .main-nav > ul > li ul li a {
    display: block;
    padding: 11px 25px;
    border-top: 1px solid rgba(0, 0, 0, 0.05); }
    .main-nav > ul > li ul li a:hover {
    background: rgba(238, 29, 36, 0.005); }

    .main-nav > ul > li ul li:first-child a {
    border-top: 0;
    }

    .is-sticky .header-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 0;
    -webkit-transform: translate(0, -100%);
    -moz-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    transform: translate(0, -100%);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    will-change: transform; }

    .admin-bar .is-sticky .header-navbar {
    top: 30px;

    }

    .is-sticky.scrolled-up .header-navbar {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0); }

    .responsive-menu {
    padding: 18.33333px 0; }
    @media (min-width: 992px) {
    .responsive-menu {
    display: none !important; } }
    .responsive-menu:focus {
    outline: none !important; }

    .mobile-active {
    position: fixed;
    bottom: 0;
    top: 0;
    right: 0;
    z-index: 99999;
    background: rgba(255,255,255, 0.9);
    box-shadow: -1px 0 1px rgba(0,0,0,0.2);
    height: 100vh;
    width: 50%;
    overflow-y: auto;
    min-width: 300px;}
    .mobile-active > ul {
    display: block; }
    .mobile-active > ul > li {
    width: 100%;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
    .mobile-active > ul > li > a {
    display: block;
    padding: 11px 25px; }
    .mobile-active > ul > li > a:focus {
    outline: none; }
    .mobile-active > ul > li ul {
    display: block !important;
    position: static;
    margin: 0;
    padding-left: 15px;
    width: 100%;
    max-width: none;
    background: transparent;
    border: none; }
    .mobile-active > ul > li a:hover + ul {
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
    }


    mihai
    Member
    Member
    #73788

    Hi Tracy,
    I can see that the menu currently works, have you managed to solve the issue?
    Best Regards

Viewing 2 posts - 1 through 2 (of 2 total)

Main Navigation Not Working on Home Page

Home Forums WordPress Themes Megalith Main Navigation Not Working on Home Page

[i]
[i]
[i]
[i]