Home>Support>Space Items on the Navigation Menu

Space Items on the Navigation Menu

By Joshua, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hello,

I would like to space items out on the navigation bar in the Vantage theme – how would one go abouts doing this?

When I say “spaced out”, I mean like this:
ITEM 1 ITEM 2 ITEM 3 ITEM 4 SEARCH LOGIN REGISTER SUPPORT

URL: https://www.raspmag.com

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 2 months ago Joshua

    In-fact, never mind, the topic wasn’t started correctly.

    I’ll email the support team directly.

    Can a moderator please close this ticket for me please?

    Thanks.

    Josh

  2. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Hi Joshua

    Thanks for your support. It’s mostly the support team replying on the forum so we can dive in here no problem.

    You can manage your menu from Appearance > Menus. Create a custom menu and add it to the theme’s primary menu position.

    If you’re asking about the padding/spacing between each item then you can add the following to Appearance > Custom CSS and adjust the spacing as required:

    /* Menu Padding Horizontal */

.main-navigation ul li a {
	padding-right: 25px;
	padding-left: 25px;
}
    • 9 years, 2 months ago Joshua

      Hi,

      Is it possible to adjust the padding for individual items?

      Thanks,

      Josh

      • 9 years, 2 months ago Joshua

        I kind of understand the code, but if you could explain how I would do this for individual items, then that would be appreciated.

  3. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Sure, add the following to Custom CSS:

    .main-navigation li:nth-of-type(2) a {
	padding-left: 10px;
  	padding-right: 10px;
}

    That would change the padding of the second item. The value 2 decides that. Repeat as required.

    • 9 years, 2 months ago Joshua

      When you say “item”, I assume you mean item in the custom menu created, and, does that include child-pages, or are they ignored?

      Which one is correct?
      Figure One:
      Home (1)
      About (2)
      – Software (3)
      – Hardware (4)
      Support (5)

      Figure Two:
      Home (1)
      About (2)
      – Software
      – Hardware
      Support (3)

    • 9 years, 2 months ago Joshua

      Never mind, I’ve figured that bit out, but when I adjusted the padding, all the writing became really scrunched up. I would just like to leave a gap before the text, but the code does not seem to agree with this for some reason. Do you want an image of this? You can go to https://www.raspmag.com to see in action, under support.

  4. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Figure one is correct.

    Did you adjust the 10px value for padding I provided? That’s just a test value. Adjust it as required.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More