Twenty Seventeen: background colour for menu
-
Hi
I’d like to set a background colour behind the menu.
I have
.navigation-top { background-color: #EBEBEB; }but am missing the part behind the menu links.
Thank you :-)
The blog I need help with is: (visible only to logged in users)
-
I also added
.menu-item { font-size: 105%; font-weight: normal; }to make the font in the menu a bit bigger. This works, but:
– “font-weight: normal” seems to be ignored, the font still looks bold to me
– now, if you hover over one of the menu point with subpages, the font of the link to the subpage looks bigger than the font in the menu
-
Related: I put the hover color for the menu links to red, but don’t know how to do it for the sub-menu.
.entry-content a:hover, .entry-summary a:hover, .posts-navigation a:hover, .menu-item a:hover, .widget a:hover, .site-footer .widget-area a:hover, .widget_authors a:hover strong { -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 3px 0; color: #D20537; box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 3px 0; color: #D20537; } -
Just saw that this is in the Support forum instead of CSS Customization – could a moderator please move it? Thank you :-)
-
On the background color of the menu items, there is a background color set on the ul element. Add the following to make that transparent.
.main-navigation ul { background-color: transparent; }On the font size and weight in the menus, edit that CSS rule and make it look like this.
.navigation-top a { font-size:105% !important; font-weight:400; }For the submenu hover color, add the following.
.main-navigation li li a:hover { color: #D20537; } -
Thank you so much, thesacredpath.
I’m using it for https://ubblogtest.wordpress.com and https://rdm2017.wordpress.com.
Some additional questions:
– Can I remove the padding above and below .main-navigation ul, so that the darker background on hover fills the whole height of the menu?
– When I hover over the first sub-menu link, there is a small triangle that doesn’t change color, can this be changed (I can explain more, if you don’t see what I mean).
– On an active page, say https://ubblogtest.wordpress.com/category/kooperationen, the font color in the menu changes to grey – can that grey be darker (#2D3741;)?
– Small inconsistency: on an active page from the main menu, if I hover over the link, it still changes to red. This is fine with me.
On an active sub-menu page, say https://ubblogtest.wordpress.com/category/forschungsunterstutzung/open-science, hover over the link changes the font color to white.
I would like them to behave identically: either change both to red on hover or don’t change the color on hover, as it is the page I’m alredy on.Thank you! :-)
-
Another detail: when I look at the sub-menus on mobile, the background is white, not #FAFAFA;
And if I click on one of the sub-menus, the link color doesn’t change to red #D20537.
-
– Can I remove the padding above and below .main-navigation ul, so that the darker background on hover fills the whole height of the menu?
.navigation-top .wrap { padding-top: 0; padding-bottom: 0; }– When I hover over the first sub-menu link, there is a small triangle that doesn’t change color, can this be changed (I can explain more, if you don’t see what I mean).
I see the down arrow carat to the right of the top level menu items, and when the submenu appears, I see a small triangle pointing up on top of it. If you are talking about that small triangle off of the submenu, I don’t see a way to change the color of that on hover since it is in a different element, and not in the menu item.
– On an active page, say https://ubblogtest.wordpress.com/category/kooperationen, the font color in the menu changes to grey – can that grey be darker (#2D3741;)?
.navigation-top .current-menu-item > a, .navigation-top .current_page_item > a { color: #2D3741; }On an active sub-menu page, say https://ubblogtest.wordpress.com/category/forschungsunterstutzung/open-science, hover over the link changes the font color to white.
I would like them to behave identically: either change both to red on hover or don’t change the color on hover, as it is the page I’m alredy on.Find the .main-navigation li li a:hover rule in your custom CSS and change the CSS selector so it looks like this, which is a bit more specific.
.navigation-top .main-navigation li li a:hover { color:#D20537; } -
-
-
> when I look at the sub-menus on mobile, the background is white,
> not #FAFAFA;I added
.navigation-top .main-navigation li li { background-color: #FAFAFA; }That fixed the background behind the sub menu titles on mobile, but the background of the ident (? I mean the space before the sub menu link starts on mobile) is still white.
-
That fixed the background behind the sub menu titles on mobile, but the background of the ident (? I mean the space before the sub menu link starts on mobile) is still white.
It happening because you have changed the color of the individual list items. Instead of doing that, add #fafafa to the parent wrapper i.e the ‘ul’ tag:
.main-navigation ul ul { background: #fafafa; } -
-
-
- The topic ‘Twenty Seventeen: background colour for menu’ is closed to new replies.
WordPress.com Forums 