Navigation background in minimized mode
Permalink Browser Info Environment
Hi.
I´m using black bg for the header navigation with a white font color. But when i goes in minimized mode (for smartphones etc.) the menu loses its background color and goes white.
So, there I am with a white font on a white bg. (See attached images)
Is there a way to change these settings? Couldn´t see it in the design-area.
/Peter
I´m using black bg for the header navigation with a white font color. But when i goes in minimized mode (for smartphones etc.) the menu loses its background color and goes white.
So, there I am with a white font on a white bg. (See attached images)
Is there a way to change these settings? Couldn´t see it in the design-area.
/Peter
Type: | Discussion |
---|---|
Status: | Resolved |
Can you post a link to your site so I can test it to see exactly what's happening?
Also, the solution is probably going to be to add a media query in the custom CSS area. I'll need to test it to be sure, though.
Sorry for the delay in getting back to you. You'll need to go to the design customizer and scroll down to the bottom to add custom CSS. Here is the CSS you'll need to add:
@media (max-width: 767px) { .ccm-page nav.navbar .navbar-nav { background-color: #272526; } }
Thanks a lot!! Works fine in the top level menu, but the rollover in subnav is still white bg with a light color font. Can you help me with that also would be nice?
/Peter
/Peter
Sure, replace what I posted earlier with this:
@media (max-width: 767px) { .ccm-page nav.navbar .navbar-nav, .ccm-page nav.navbar .navbar-nav > li > ul > li > a:hover, .ccm-page nav.navbar .navbar-nav > li > ul > li > a:active, .ccm-page nav.navbar .navbar-nav > li > ul > li > a:focus { background-color: #272526; } }
Hi again.
I replaced the css code, but I can´t see any difference. It´s still white bg and light font color in the subnav. (see image).
/Peter
I replaced the css code, but I can´t see any difference. It´s still white bg and light font color in the subnav. (see image).
/Peter
I have another question:
I noticed that the pagelists thumbnails won´t stay centered when you resizing the browser window to minimum, and also how it looks in smartphones as well. The images sticks to the left, but not the text. It would be nice to have the images following the centered text
Is there a way to fix that?
I´m using "Motif Grid Three Column" on the startpage
http://www.cauco.se/v2/
/Peter
I noticed that the pagelists thumbnails won´t stay centered when you resizing the browser window to minimum, and also how it looks in smartphones as well. The images sticks to the left, but not the text. It would be nice to have the images following the centered text
Is there a way to fix that?
I´m using "Motif Grid Three Column" on the startpage
http://www.cauco.se/v2/
/Peter
Your images are too narrow. They should be a minimum of 737px wide so that they fill the whole area. The theme will resize them down as the window gets smaller, but it won't resize them up to the width of the window if the window is wider than the picture.
Try this...
@media (max-width: 767px) { .ccm-page nav.navbar .navbar-nav, .ccm-page nav.navbar .navbar-nav > li > ul > li > a:hover, .ccm-page nav.navbar .navbar-nav > li > ul > li > a:active, .ccm-page nav.navbar .navbar-nav > li > ul > li > a:focus { background-color: #272526 !important; } }