Oxygen theme: customize "small circles" in custom menu
-
On the custom menu in my Primary Sidebar, I wish to be able to customized the small circles in Custom Menu; say change them to solid black for top-level indentation, solid blue for second-level indentation, etc. Is it doable?
The blog I need help with is: (visible only to logged in users)
-
Hi, to change the circles to filled-in circles (disc), go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.
.widget_nav_menu ul { list-style: disc; } -
Hi thesacredpath, my goal is to use DIFFERENT button-types for DIFFERENT levels of indentations.
The code above, however, changes ALL of the small circles to black discs.
Is there a way to make (say) black discs for top-level indentation, blue discs for second-level identation, etc.
Appreciate your help :)
-
Hi, yes we can do this in Oxygen. I’ve used color names so you can easily see which are which. Add this to your custom CSS and then adjust the colors as desired.
.widget_nav_menu ul.sub-menu { color: blue; } .widget_nav_menu ul ul ul.sub-menu { color: red; } -
Thanks thesacredpath, it works great!
Now, for top 6 topics (currently in CAPITAL letters):
http://paulshaperproductions.com/I wish NOT to have any bullets in front of them and wish to change their color to (say) light-brown color.
Then, add a horizontal space below them.
Then, (below the horizontal space) change ONLY black discs to black circles.If it’s doable, please show me how. Thanks a bunch.
-
Also, while we’re at the custom menu in my Primary Sidebar, I also wish to change the link color.
For example, when I click on “2016 RUG CALENDAR” (currently at top of custom menu in Primary Sidebar, please refer to http://paulshaperproductions.com/), while I browse that page, I wish the text color of “2016 RUG CALENDAR” to change from black to (say) blue. Thanks for your help.
-
Hi there,
I wish the text color of “2016 RUG CALENDAR” to change from black to (say) blue.
Do you mean that you want the text to change when you hover over that item in the custom menu you want it to change when you hover over it? So it’s black normally, but blue as soon as your cursor goes over it?
If yes, you can use the following code, replacing “blue” with the specific color you want to use:
,
.widget ul li a:hover {
color: blue;
}
`Now, for top 6 topics (currently in CAPITAL letters):
http://paulshaperproductions.com/
I wish NOT to have any bullets in front of them and wish to change their color to (say) light-brown color.
Then, add a horizontal space below them.
Then, (below the horizontal space) change ONLY black discs to black circles.
If it’s doable, please show me how. Thanks a bunch.That is a pretty specific vision for what you want to do here, and will be hard to accomplish using custom CSS. I would not be able to help with all of that, as we don’t offer design work as part of our support services, but I can help get you on the right track.
Generally speaking, learning how to target your site’s CSS will help you make certain design and layout changes. Here are some very helpful posts that will help you customize your menu with CSS:
– https://dailypost.wordpress.com/2013/07/25/css-selectors/
– http://dailypost.wordpress.com/2013/06/21/css-intro/
– http://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/
– http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
– https://thewc.co/articles/view/web-inspector-tutorial
Good luck, and let me know if you need help with anything specific once you get going.
For substantial structural changes you might want to look into hiring a firm to make the tweaks for you.
Good luck, and let me know how it goes!
- The topic ‘Oxygen theme: customize "small circles" in custom menu’ is closed to new replies.
WordPress.com Forums 