Modifying the menubar with custom CSS

  • Author
  • #103564

    Me again! You were quick and helpful last time, and I feel a bit lost in the jungle (especially when hosted on where you can’t really dig around as easily in files).

    I want to fiddle a bit with colors, possibly transparency, and also margins/paddings of the menu containers. My problem is that I’m having a hard time finding the class/id that determines all this, so something like:

    .menu-primary-container {
    	padding: 4px;

    doesn’t make any difference. Could you help me identify which classes/id:s will need changing to alter menu colors (childmenu bars that is), transparency and spacing above and underneath the links?

    Much appreciated,
    Erik, a lost newbie.

    The blog I need help with is: (visible only to logged in users)

    Theme Author

    Hi Erik,

    You might want to target the menu with something like this:

    .site-header .main-navigation { }

    It really depends on exactly what kind of styles you are going for. There’s also a Custom CSS forum that might be helpful for locating these selectors and finding help with specific styles.

    Original poster

    Bah, finally found it. I had already tried your selectors without any luck, as they were already at 0 height padding. The padding that did it for me was found in the
    .site-header .main-navigation li ul a, .site-header .main-navigation li ul li a { } selector haha. Quite hidden, especially when I inspected the element without right-clicking a dropdown link. Ah well, I’ll be self-sufficient from here, and I’ll scour the forums you linked for future reference.

    Thank you for your help :)

    Original poster

    My menu is now looking exactly the way I want it, overly simple and minimalistic! Woohoo!

  • The topic ‘Modifying the menubar with custom CSS’ is closed to new replies.