[Support request] Header and Nav background colors not working in mobile

Home Forums Support Header and Nav background colors not working in mobile

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #345380
    David

    Hey All:

    I’m twisted up in my shorts over something… I’m trying to re-create a site and I’m struggling with colors in the header & nav between desktop & mobile. The site (work in progress) is http://carefreecabins.mauder.com/sites/cchh20/

    I have a background image for the entire site, and the body is set to white with about 85% transparency so the background shows through a bit. I have the header background set to the same color. The nav background isn’t set to any color because it seems to pickup the header background when in desktop mode.

    However, when switching to mobile, I lose the background color, and now my background just shows through 100%. If I try to set the transparent white background on primary nav, then it appears white in desktop mode because it’s doubling up the two colors (if that makes sense).

    How can I get this to look right in desktop and mobile? Is it because I have mobile menu enabled?

    GP Premium 1.3.1
    #345381
    David

    FYI… If I disable mobile header, the color issue goes away, but then my logo isn’t centered on mobile. I’m fine either way (with or without mobile header), but if I don’t use it, I’d like to keep the logo left aligned on desktop, and center it on mobile.

    #345463
    Tom
    Lead Developer
    Lead Developer

    Interesting, this is because your navigation has no background.

    You could try manually adding the color to the menu on mobile like this:

    @media (max-width: 768px) {
        .main-navigation {
            background-color: rgba(255,255,255,0.85);
        }
    }
    #345511
    David

    Understood Tom, and thanks for the reply. The reason my nav has no background is because it seems to pickup the header background color in desktop mode. If I also set the nav to the same background, it’s like double-coloring it, and then it appears white in desktop.

    Thanks for the CSS, and at the risk of showing my “noob”, where is the correct place to insert CSS like this? Is it best to use SimpleCSS and just plop all custom CSS in there for the entire site?

    To be honest, I kinda like the look better if I don’t use mobile header, but then my logo is left aligned on mobile too and doesn’t look right. How could I adjust the header logo to be centered only in mobile view?

    Thanks!

    #345656
    Tom
    Lead Developer
    Lead Developer

    You can use Simple CSS, or the Additional CSS section in the Customizer. More here: https://docs.generatepress.com/article/adding-css/

    The above CSS should allow you to continue using the regular header/nav over the mobile header if you like that look more 🙂

    #349829
    David

    Me again!

    I’m struggling to figure out some additional tweaks for my mobile menu colors. I wanted to change the mobile menu background to black w/white text so it stands out more (better contrast). I think I have that working OK, but the issue is when the menu is actually clicked/opened on mobile, the little hamburger and “Menu” text reverts back to black text on transparent background.

    How do I get the “current” or “clicked” mobile menu to also be black background with white text?

    Here is the current CSS I’m using to customize my mobile menu. I’m sure it’s not very efficient code, but I’m learning and I’ve just managed to piece this all together from various questions I’ve asked. 🙂

    Thanks,
    Dave

    
    /*
    To set background color on mobile menu
    
      Orig: background-color: rgba(255,255,255,0.85);
    */
    @media (max-width: 768px) {
        .main-navigation {
            background-color: rgba(255,255,255,0.85);
        }
    }
    
    /*
    Change size of mobile nav hamburger menu & label
    */
    .main-navigation .menu-toggle {
    text-align: center;
    font-size: 22px;
    background-color: #141414;
    color: #ffffff;
    }
    
    /*
    Align mobile nav menu text
    */
    .main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
        text-align: center;
        background-color: #141414;
        color: #ffffff;
    }
    
    /*
    Change sub-nav font attributes
    */
    .main-navigation .main-nav ul ul li a {
        font-size: 16px;
            background-color: #141414;
        color: #ffffff;
    }
    
    /*
    Change width & dynamic sizing of sub-nav menu items 
    */
    .main-navigation ul ul {
      width: auto;
      white-space: nowrap;
            background-color: #141414;
        color: #ffffff;
    }
    #349920
    David

    It looks like the above CSS to change the background color and font color of my menu also changed it for desktop (not just mobile). I’m going to remove all that and hopefully figure out how to change just mobile to black background with white text.

    #349923
    Leo
    Staff
    Customer Support
    #349926
    David

    Thank you Leo! I will try this when I get back to my computer in a little while. I was making progress by encapsulating some of the previous CSS inside the media query. I’ll let you know how it turns out! 🙂

    #350464
    David

    Tom: I’m updating this thread with the CSS I have currently to customize my mobile menu.

    @media (max-width: 768px) {
        .main-navigation {
            background-color: rgba(255,255,255,0.85);
        }
    
        .main-navigation .main-nav ul ul li a {
            background-color: #141414;
            color: #FFF;
            font-size: 16px;
        }
        
        .main-navigation .main-nav ul li a, 
        .main-navigation .menu-toggle {
    	color: #FFFFFF;
        background-color: #141414;
        margin-right: 10px;
        margin-left: 10px;
        border-bottom: 1px solid #FFF;
        }
        
        .main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
          background-color: #141414;
          color: #FFF;
        }
        
        .main-navigation .main-nav ul li > a:hover, 
        .main-navigation .main-nav ul li > a:focus,
        .main-navigation .main-nav ul li.sfHover > a {
    	color: #FFFFFF;
    	background-color: #141414;
        }
        .main-navigation .current_page_item {
        	color: #FFF;
    	    background-color: #929E68;
            float: left;
        }
    }

    And as mentioned in the FB group, here’s what I’m trying to do:

    I basically want to turn the entire mobile menu to black background with white text for each nav item. Here are the things I’m still fighting with:

    1. It starts out fine (hamburger menu has black background with white text), but once I tap to open the menu, it changes to transparent background with black txt (like on desktop) and stays that way until I refresh the entire page.

    2. I want to highlight the nav item for the current page with a blue background with white txt. No matter what I’ve tried, I can’t get the txt color to change.

    2a. Also, when I highlight the background of the current page/nav item to blue, it spills off the edges of the screen instead of staying contained within the menu boudaries. Ugh.

    OK, bonus item #3 would be to get the mobile menu items to be left aligned with sub-nav items slightly indented. See screenshot for example. On desktop, the nav items are centered with dynamic width.

    #350653
    Leo
    Staff
    Customer Support

    1. Mobile menu background is black already? https://s10.postimg.org/ee685fd55/IMG_6006.png

    2/2a. Try this:

    @media (max-width: 768px) {
        .main-navigation .main-nav ul li[class*="current-menu-"] > a {
            color: #000000;
            background-color: #ffffff;
        }
    }

    3. It should be left align by default but you have this CSS added:

    .main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
        text-align: center;
    }

    Indent:

    @media (max-width: 768px) {
        .main-navigation .main-nav ul ul li a {
            padding-left: 30px;
        }
    }
    #350682
    David

    Thank you again Leo!

    For #1, yes the mobile menu is currently black, when you open it and then tap it again, it is no longer black. It changes to transparent like the desktop (non-mobile) menu.

    And for #3, that CSS was suggested by someone in the FB group to center the menu items for the desktop view. Unfortunately, it’s also affecting mobile. How can I only center nav menu items for desktop, but left align with indented sub-nav for mobile?

    I’m going to feel SO satisfied and relieved when I get all this working! LOL

    Just as an FYI… I’m actually trying to get my mobile menu to look pretty much identical to the one on my current Wix site that I’m re-creating (so I can leave Wix!). The Wix site is:

    https://www.carefreecabinshockinghills.com/

    #350692
    Leo
    Staff
    Customer Support

    1. Try adjusting your block of code to this:

    .main-navigation .main-nav ul li a, 
    .main-navigation .menu-toggle {
        color: #FFFFFF !important;
        background-color: #141414 !important;
        margin-right: 10px;
        margin-left: 10px;
        border-bottom: 1px solid #FFF;
    }

    3. Wrap it in desktop only @media:

    @media (min-width:769px) {
        .main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
            text-align: center;
        }
    }

    Then add my indent code above.

    #350794
    David

    OMG dude, it’s *almost* PERFECT now! I’m so stoked! 🙂

    So, the only thing still not working, is changing the background to blue on the menu item that represents the current page you are viewing.

    Here is every bit of my current custom CSS. I put that second section in there as you suggested, but it’s not changing the background to blue (#BCE1EE). Any ideas? Once I get that working, it’s EXACTLY what I wanted.

    BTW, what does the “!important” actually do?

    /*
     Customize mobile menu
    */
    @media (max-width: 768px) {
        .main-navigation {
            background-color: rgba(255,255,255,0.85);
        }
        
        .main-navigation .main-nav ul li[class*="current-menu-"] > a {
            color: #FFFFFF;
            background-color: #BCE1EE;
        }
    
        .main-navigation .main-nav ul ul li a {
            background-color: #141414;
            color: #FFF;
            font-size: 18px;
            padding-left: 30px;
        }
        
        .main-navigation .main-nav ul li a, 
        .main-navigation .menu-toggle {
    	color: #FFFFFF !important; 
        background-color: #141414 !important;
        margin-right: 10px;
        margin-left: 10px;
        border-bottom: 1px solid #FFF;
        }
    }
    
    /*
    Query for desktop/tablet mode
    Center nav menu items 
    */
    @media (min-width:769px) {
        .main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
            text-align: center;
        }
        
        /*
        Change width & dynamic sizing of sub-nav menu items 
        */
        .main-navigation ul ul {
           width: auto;
           white-space: nowrap;
        }
    }
    #350817
    Tom
    Lead Developer
    Lead Developer

    It’s not working as you set !important on the regular links: background-color: #141414 !important;

    You’d have to add !important to the current menu item in that case: background-color: #BCE1EE !important;

    !important basically tells the browser to use that CSS no matter what (even if other selectors are more specific).

    !important can be avoided by using more specific selectors than the ones you’re overwriting.

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.