Mobile Masthead Menu Nav Bar Doesn't load on Landing Page

  • Author
    Posts
  • #163506

    Hi Taras,

    Again thank you for your amazing support on this theme.

    On my mobile version of the website, the main header does not load on my homepage and careers page. It does load, however, on all other pages of the website just fine.

    If needed I can attach all the custom CSS I placed related to the headers if that helps?

    My website is now live under: appstockvideo.com

    Thanks again!

    The blog I need help with is appstockvideo.com.

    #163507

    tarasdashkevych
    Theme Author

    Hello,

    It seems like the slider overlays the site header on your homepage. Please add this custom CSS to your site:

    
    .home #masthead {
      z-index: 100;
      color: #424242;
    }
    

    It should resolve the issue on your homepage.

    Please let me know if you have any additional questions.

    Kind regards,
    Taras

    #163508

    Hi Taras,

    Please disregard the above request; I was able to resolve the issue. I’m working with some plugins that can get in the way sometimes.

    Additionally, is there a way to change the header (main nav) background color before scrolling on specific pages? Meaning the default load viewport menu before scrolling.

    I changed the color of the text in the main nav to white since I have images that clash with the default black, but some of my pages have a white background that can make the nav text hard to read.

    Lastly, is there a way to change the header nav background on the mobile version? As well as different colors for different pages?

    Thank you so much,

    – David Ohana

    #163513

    tarasdashkevych
    Theme Author

    Hello David,

    “Additionally, is there a way to change the header (main nav) background color before scrolling on specific pages?”
    – Since WordPress does not provide options to change colors of the section on a specific page, you’ll need to use a custom CSS to make custom changes to the site header.

    Here is an example of customizing the site header for your Publisher page:

    
    @media (min-width: 768px) {
      .page-id-479 .site-header:not(.scroll-header) {
        background-color: #000000;
        color: yellow;
      }
    }
    

    Where 479 is the ID of your page.

    Before using this custom CSS, please replace your current CSS to avoid conflicts (see instructions below).

    “Lastly, is there a way to change the header nav background on the mobile version?”
    – Sure. First of all, please replace this custom CSS on your site:

    
    #masthead {
      color: #f2f2f2;
    }
    
    #masthead.scroll-header {
      background-color: #ffffff;
      color: #000000 !important;
    }
    

    To this one:

    
    .singular-featured-image-inactive .site-header:not(.scroll-header) {
      color: #f2f2f2;
    }
    
    @media (min-width: 768px) {
      .site-header.scroll-header {
        background-color: #ffffff;
        color: #000000;
      }
    }
    

    Then, to change colors of the site header section in mobile views, please add this custom CSS to your site:

    
    @media (max-width: 768px) {
      .site-header {
        background-color: #000000;
        color: #4be3b5;
      }
    }
    

    “As well as different colors for different pages?”
    – At the moment, WordPress does not allow to change colors of the site header on specific page, so the only way to do it is to use a custom CSS.

    To apply custom colors to the site header on a specific page, you need to know the ID of that page.

    Here is an example of adding custom colors to your Publishers page (ID is 479):

    
    @media (max-width: 768px) {
      .page-id-479 .site-header {
        background-color: #4be3b5;
        color: #000000;
      }
    }
    

    Hope this helps. Please let me know if you have any additional questions.

    Kind regards,
    Taras

The topic ‘Mobile Masthead Menu Nav Bar Doesn't load on Landing Page’ is closed to new replies.