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.

Reduce padding in main menu dropdown

  • Creator
    Topic
  • #8185
    atlantisrailjohn
    Participant

    I have a lot of links under a main menu dropdown, is there a way to reduce the padding/spacing between items to shorten the list?

    Or, is it possible to make the dropdown link list slide horizontally vs. vertically?

    Thanks,

    John

Viewing 8 replies - 1 through 8 (of 8 total)
  • Author
    Replies
  • #8193
    Jason Bobich
    Keymaster

    Hello,

    For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

    For example, here’s one way you could target the anchor tags that are in the drop down menus, to maybe target it’s font size and padding.

    #menu-wrapper #main-menu .menu li li a { ... }

    http://www.w3schools.com/cssref/pr_font_font-size.asp

    http://www.w3schools.com/css/css_padding.asp

    Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

    #8216
    atlantisrailjohn
    Participant

    Ok, I’m using Firebug but it does not show anything when I select the dropdown menu. I’ll view the tutorial. Maybe I can make the dropdown menu open horizontally vs. vertically?

    #8222
    atlantisrailjohn
    Participant

    Not sure how to see code thats executed using Firebug when I hover over the dropdown menu.

    Is there a CSS rule for the menu dropdown that specifies the padding?

    #8225
    Jason Bobich
    Keymaster

    Is there a CSS rule for the menu dropdown that specifies the padding?

    Yup, it’s the selector I gave you at the start. 😉

    #menu-wrapper #main-menu .menu li li a { padding: ...; }

    … The overall padding of the drop down menus is mainly determined by the padding of each link. So, reduce the top/bottom padding of all the buttons in the dropdown and the dropdown will be come smaller, vertically.

    #8519
    atlantisrailjohn
    Participant

    Which CSS file is that in?

    #8520
    atlantisrailjohn
    Participant

    I can’t seem to find where the top/bottom padding of all the buttons in the dropdown is specified?

    So close, yet so far 🙂

    #8522
    atlantisrailjohn
    Participant

    Found it!!!

    Thanks for the pointers

    #8523
    Jason Bobich
    Keymaster

    It’s not in any files to edit. You really shouldn’t be editing any files of the theme, or you’ll never be able to update in the future.

    If you’re going to be making these changes (and you will most likely run into more changes later you’ll want to make), I’d really suggest just taking a minute and reading what I wrote above and taking in the info and resources, or you could get yourself into trouble, moving forward.

    You should be putting your custom, overriding CSS into either the “Custom CSS” option on your theme options page, or you place it in your child theme’s custom.css file.

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