This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Menu Type Size and Color

  • Creator
    Topic
  • #12019
    thomasbrennan
    Participant

    Hello,

    I’m fairly new to WordPress. Can you give me advise on changing the size and color of the typeface for the navigation menu text in the Swagger. Any suggestions would be greatly appreciated.

    Here’s a link:

    http://schedlerbrennan.com/essex5/wordpress/?page_id=25

    All the best, Tom

Viewing 5 replies - 1 through 5 (of 5 total)
  • Author
    Replies
  • #12021
    thomasbrennan
    Participant

    Hello again,

    I just found the forum posting related to this; #9151. Should have looked first.

    Looks like I’ll have to change it in the child theme’s style.css file, correct?

    Thanks for a great theme!

    #12027
    Jason Bobich
    Keymaster

    Hello,

    Yup, you got it. Any kind of CSS customizations you want to make can go either in your child theme’s style.css or the “Custom CSS” option. But if you’ve got a child theme setup (which you do), I’d definitely put your custom styles in style.css, as this will be a much easier way to keep things organized.

    You can also install this plugin for easier editing from your WP admin of of your CSS file:

    http://wordpress.org/plugins/wp-editor/‎

    Specifically to your original question, you’re really close on what you’re trying to do, but your CSS doesn’t quite override what the theme is doing. You’re doing this:

    #access a { ... }

    But this is what the theme is currently using for a selector styling the menu items, which is more specific:

    #acces li a { ... }

    So, that’s what you want to use from your custom CSS to override.

    #access li a {
    	color: blue;
    	font-size: 38px;
    	font-family: verdana;
    }

    In order to find this, you want to use your inspector. For example, using Chrome’s built-in tools, this is how you can quickly find out what selector is currently the most specific being used by the theme that you can override. Over in the right column of the inspector, whatever selector is at the top is what’s the most specific and taking precedence.

    Screenshot: http://www.uploadblvd.com/uploads/image_524c61b03dc9c.png

    #12034
    thomasbrennan
    Participant

    Thanks much Jason! That worked perfectly. Any tips on how to center that menu?

    Thanks again, Tom

    #12055
    Jason Bobich
    Keymaster

    When working with unordered lists, it is sort of difficult to center these items without knowing the width of the containing <ul>. If you google around there are various approaches you can try, but nothing really out there that is simple and easy across all web browsers.

    For reference, here’s another theme where I center the list items: http://www.themeblvd.com/demo/arcadian/ — Basically the approach I take is setting the list items to display as “inline-block” and then centering text within the wrapping list.

    Here are some of the selectors that you can use, depending on how you want to take a stab at it:

    /* Top level unordered list */
    #access #primary-menu { ... }
    
    /* Top level list items */
    #access #primary-menu > li { ... }
    
    /* Top level buttons within list items */
    #access #primary-menu > li > a { ... }
    #12093
    thomasbrennan
    Participant

    Thanks again for your help Jason. I’ll give it a shot. Best, Tom

Viewing 5 replies - 1 through 5 (of 5 total)
  • The forum ‘Swagger Responsive WordPress Theme’ is closed to new topics and replies.