Community Forums › Forums › Archived Forums › Design Tips and Tricks › Styling menus – what selectors to use?
- This topic has 7 replies, 3 voices, and was last updated 5 years, 4 months ago by sp1127.
-
AuthorPosts
-
January 1, 2019 at 5:14 pm #225375sp1127Member
I'm using the Genesis framework to create my own child theme. I want to learn about adding CSS to style the navigation menu.
I've already added several things like this:
.genesis-nav-menu a {
color: #fff;
font-family: Prompt, sans-serif;
font-weight: 200;
font-size: 120%;
background-color: #18ddb1;
}This, for instance, changes the font and the background color of the menu top-level buttons.
However, I've been unable to change the background color of sub-menu items. Instead of asking a bunch of specific questions, I'd like to start my asking if there's a general guide to styling menus in Genesis (or perhaps in WordPress in general, if that applies). I'm looking for something that would tell me which selectors to choose to style different parts of the menu.
January 2, 2019 at 7:59 am #225380Victor FontModeratorI'm not aware of any guides, but one of the best tools to use is your browser's built-in inspection tool. The inspection tool allows you to see selectors and experiment with non-destrucive CSS changes. The inspection tool is your friend. https://victorfont.com/how-to-use-your-browsers-inspect-tool/
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?January 2, 2019 at 2:29 pm #225391sp1127MemberThanks. I did in fact inspect the markup and styling. I guess I need to be specific then, in my question.
I can't change the background color of the sub menus. (Just the *sub* menus.)
I was able to change the background color of the main menu buttons by styling the
- (or maybe it was the ) element. The selector was something like
.genesis-nav-menu li {
...
}But the sub menus stayed the same color, white. I tried every combination of selectors I could think of, and the sub menu background color never changed.
January 3, 2019 at 8:53 am #225399Victor FontModeratorCan you post a link to the site please so we can see the CSS?
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?January 3, 2019 at 2:33 pm #225404sp1127MemberThe site is local, but yes, I can push it out to my host company's server for you. But, I haven't done that with WordPress before... do you have a recommended way to deploy a WordPress site? What I'd like to do long-term is (1) do all development locally, then (2) push it out without any fuss. I don't want to have to move the database separately or anything like that, just want to know that my server will exactly mirror my local site.
January 4, 2019 at 3:42 pm #225414sp1127MemberOkay, I have the site up. It's at michaelmossey.com
The right menu button is an example of a drop-down menu. The background of it is mostly white. I want to make the background green.
Mike
January 5, 2019 at 12:01 am #225416andytcParticipant/genesis-sample/style.css - Line 1023
.genesis-nav-menu .sub-menu a { background-color: #fff; font-size: 14px; position: relative; word-wrap: break-word; }
Change the background-color -
background-color: #18ddb0;
January 5, 2019 at 2:11 pm #225421sp1127MemberThanks!
- (or maybe it was the ) element. The selector was something like
-
AuthorPosts
- The topic ‘Styling menus – what selectors to use?’ is closed to new replies.