How to put spaces in-between your links on your navigation bar?

net1994

Hello all - For my site-wide navigation bar, I have a few links visible on every page. These links are all grouped together in one bunch, per normal. What I'd like to do is to add a space in-between two of these links. For instance, Home, Pics (space/line), Blog, About, (space/line) contact. I don't want a line under every link.

See below screenshot which is easier to show perhaps. I opened up the content block for my nav bar, but there isn't anyway for CSS customization which I'm assuming I would need to add in for this to happen. Thanks!

Hikin' Mike

Add this to your theme's custom CSS section:

.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .sm-page-widget-nav-toplink:nth-child(1),
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .sm-page-widget-nav-toplink:nth-child(4) {padding-bottom:20px;border-bottom: 1px solid red;}

The (1) and (4) go in sequence on your menu (1- Home, 4 - Mixed Bag).

net1994

@Hikin' Mike said:
Add this to your theme's custom CSS section:

.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .sm-page-widget-nav-toplink:nth-child(1),
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .sm-page-widget-nav-toplink:nth-child(4) {padding-bottom:20px;border-bottom: 1px solid red;}

The (1) and (4) go in sequence on your menu (1- Home, 4 - Mixed Bag).

Thanks Mike! Is there a way to narrow the lines, so it doesn't get close to the margins of the menu bar?

Hikin' Mike

@net1994 said:
Thanks Mike! Is there a way to narrow the lines, so it doesn't get close to the margins of the menu bar?

Not without changing your standard navigation to a HTML/CSS navigation.

Hikin' Mike

If you go custom, this is a basic outline:

HTML:

<ul class="my-nav">

  <li class="link"><a href="">Link 1</a></li>
  <li class="sep"></li>
  <li class="link"><a href="">Link 2</a></li>
  <li class="link"><a href="">Link Link Link 3</a></li>
  <li class="link"><a href="">Link 4</a></li>
  <li class="sep"></li>
  <li class="link"><a href="">Link Link 5</a></li>
  <li class="link"><a href="">Link 6</a></li>

</ul>

CSS:

.my-nav{
  text-align: center;
}

.sep {
  height: 1px;
  width: 50px;  
  margin: 10px auto;
  background: red;
}

Keep in mind that mobiles won't work like the standard navigation.

net1994

Thanks Mike. For the above, is the only way to use both HTML and CSS? If so, it will be a lot more work than might be worth. I was just hoping for a CSS value to add.

Hikin' Mike

@net1994 said:
Thanks Mike. For the above, is the only way to use both HTML and CSS? If so, it will be a lot more work than might be worth. I was just hoping for a CSS value to add.

No other way that I'm aware.