- This topic has 16 replies, 3 voices, and was last updated 6 years, 8 months ago by Leo.
-
AuthorPosts
-
July 6, 2017 at 8:33 pm #345380Dave
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?
July 6, 2017 at 8:39 pm #345381DaveFYI… 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.
July 7, 2017 at 12:59 am #345463TomLead DeveloperLead DeveloperInteresting, 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); } }
July 7, 2017 at 4:11 am #345511DaveUnderstood 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!
July 7, 2017 at 9:46 am #345656TomLead DeveloperLead DeveloperYou 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 π
July 15, 2017 at 9:58 am #349829DaveMe 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; }
July 15, 2017 at 2:56 pm #349920DaveIt 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.
July 15, 2017 at 3:16 pm #349923LeoStaffCustomer SupportJamal’s CSS here might be helpful for mobile menu customizations: https://generatepress.com/forums/topic/how-to-style-navigation-menu/#post-347001
July 15, 2017 at 3:35 pm #349926DaveThank 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! π
July 16, 2017 at 11:39 pm #350464DaveTom: 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.
July 17, 2017 at 8:32 am #350653LeoStaffCustomer Support1. 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; } }
July 17, 2017 at 9:14 am #350682DaveThank 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:
July 17, 2017 at 9:32 am #350692LeoStaffCustomer Support1. 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.
July 17, 2017 at 12:49 pm #350794DaveOMG 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; } }
July 17, 2017 at 2:04 pm #350817TomLead DeveloperLead DeveloperIt’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.
-
AuthorPosts
- You must be logged in to reply to this topic.