mobile menu background color and other issues

  • to @kharisblank, I have seen that you have helped others with a similar issue, however, when copying in the code that you recommended, it helped on the preview menu, but not on the actual menu when testing on a phone. I even tried using a separate phone to ensure there were no caching issues.

    When you click on the mobile menu (hamburger) 2 of the 5 menu options have a white background unlike the black background that the rest of the menu has. And the sub menu is in blue. the extra CSS I have is below. In addition to that problem, Now I see that my mobile version now shifts sections of the page to the right when scrolling up or down.

    @media only screen and (max-width:767px){

    .header-wrap .container{
    text-align: left;
    }

    #mainnav-mobi ul li {
    background-color: #000000; !important
    }

    #mainnav-mobi ul ul.sub-menu li {
    background-color: #000000; !important
    }

    .header-wrap .btn-menu{
    float: right;
    margin-right: 15px;
    }

    .header-wrap .col-md-4 {
    max-width: 90%;
    position: relative;
    z-index: 2;
    }

    .header-wrap .col-md-8 {
    margin-top: -70px;
    }

    #mainnav-mobi {
    top: 150px;
    }

    }

    .slides-container .slide-item{
    background-position: 50% -300% !important;
    }

    .slide-inner {
    top: 90%;
    padding-left: 0px !important;
    text-align: center;
    }

    .site-title {
    text-align: left;
    }

    .site-description {
    padding-left: 45px !important;
    margin-top: 2px !important;
    text-align: left;
    }

    .menu {
    text-align: right;
    margin-top: -80px !important;
    }

    .text-slider .subtitle {
    font-size: 15px;
    line-height: 40px;
    padding: 20px 0 50px;
    font-weight: 300;
    text-align: center;

    The page I need help with: [log in to see the link]

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

  • Hello there,

    Thank you for raising your query on Sydney support channel here.

    Your code contains error in the below lines. 

    
#mainnav-mobi ul li {
background-color: #000000; !important
}

#mainnav-mobi ul ul.sub-menu li {
background-color: #000000; !important
}

    Please replace it to 

    
#mainnav-mobi ul li {
background-color: #000000 !important; 
}

#mainnav-mobi ul ul.sub-menu li {
background-color: #000000 !important;
}

    The most bottom line also missing the closing curly bracket. 

    
.text-slider .subtitle {
font-size: 15px;
line-height: 40px;
padding: 20px 0 50px;
font-weight: 300;
text-align: center;
}

    I hope this reply helps.

    Stay safe.
    Have an excellent day ??

    Regards,
    Kharis

    Thread Starter orryjp

    (@orryjp)

    Hello again @kharisblank,

    Thank you for the help. However, after updating the CSS, I am still having the same problems on the mobile version of my site.

    1) The Home button and the Services button do not show a black background on the menu like the rest of the options.

    2) When scrolling up and down on the pages, they shift to the right. I have already erased the cache from my phone to double check as well as changed section overflow to hidden.

    thank you,
    Orry

    Hi Orry,

    Thank you for getting back.

    1) The Home button and the Services button do not show a black background on the menu like the rest of the options.

    I found these line of code cause that issue. 

    
.menu {
text-align: right;
margin-top: -80px !important;
}

    To fix it, please replace it with: 

    
@media only screen and (min-width: 1025px) {
  #mainnav .menu {
    text-align: right;
    margin-top: -80px !important;
  }  
}

    Let me know whether it fixes the issue or not. When it does, then we can move to your second issue.

    Stay safe.
    Have an excellent day ??

    Regards,
    Kharis

    Thread Starter orryjp

    (@orryjp)

    @kharisblank The code that I inserted did not fix the problem but has been updated.

    Hi @orryjp,

    As checked with the web browser’s inspector, the new code change hasn’t not yet applied. This may be due to active caching on your site. Sorry, I forgot to inform you that you need to flush the cache whenever apply some changes. Otherwise, web browser will only load the cached version.

    Stay safe.
    Have an excellent day ??

    Regards,
    Kharis

    Thread Starter orryjp

    (@orryjp)

    i believe it has fixed?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘mobile menu background color and other issues’ is closed to new replies.