Nav Menu Spacing

  • I have almost finished my theme but my nav-menu seems to cluster the items really close together.

    e.g. HomeAbout instead of Home About

    And I was wondering how (hopefully with CSS) I could get a space in between them.

Viewing 3 replies - 1 through 3 (of 3 total)

  • I’m no expert on WP, but the CSS is very easy as long as you know what the ID/class of your menu is.

    For me I have a #menu-primary – that is a UL with that ID. You want to effect the anchor (link) within the list item within that menu. In my style.css I have the line:

    #menu-primary li a {padding: 5px 10px; margin: 0px; border: 1px solid ccc; background: #efefef; display: block; text-decoration: none; color: #0DA4D3;}

    This adds padding of 5px above/below and 10px to the sides of each menu link, its also makes the links behave like buttons because of the block display. Something like: [__Home__][__About__]

    Obviously there’s a lot more you can do like making the button change appearance on rollover – but I’m not sure how much HTML/CSS you know?

    If you are completely lost – try right clicking the menu in your browser and clicking “Inspect Element”, this is how to find out which bits of the html/css you are wanting to edit, and finding out the ID name of this particular menu. Hope that helps.

    Thread Starter Ozzin

    (@ozzin)

    I’m fairly confident with CSS and I will try using padding, although I did before but I did have a few problems with me not closing off with a ‘;’ when I was coding the theme so I may have forgotten and then removed it when it “didn’t work”

    Thread Starter Ozzin

    (@ozzin)

    Thank you. Worked perfectly.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Nav Menu Spacing’ is closed to new replies.