[Resolved] css to create space between main navigation buttons

[Joanne Smith]

I have been adjusting your theme to look like an older theme — the 2 are separate websites with different themes on a domain https://www.glassvinylgraphics.com.au/ and sub domain ( shop ) https://shop.glassvinylgraphics.com.au and I am trying to colour up your theme to look ( at best )the main website.

One of the last thing I have to do is separate the Top Main Navigation buttons with some space between them and have the main navigation bar background image show through between them.

here is the image of the main website navigation style

https://shop.glassvinylgraphics.com.au/wp-content/uploads/2016/03/nav-main-site.jpg

and here is what I have done so far on the other website

https://shop.glassvinylgraphics.com.au/wp-content/uploads/2016/03/nav-shop-site.jpg

I can’t seem to find it in the element spacing — is there a custom css ??

thanks

Joanne

[Tom]

First, you’ll want to remove any colors or images you have set for the menu background.

Then add this CSS:

.main-navigation .main-nav > ul > li:not(:last-child) {
    margin-right: 10px;
}

[Joanne Smith]

Perfect – actually it sort of worked without removing the background images

The CSS for Nav and widget Title custom colours:

@charset “utf-8”;
/* CSS Document */

.sidebar .widget {
padding: 0;
background-color: transparent;
}
.sidebar .widget > * {
padding: 20px;
background-color: #ebeeef;
border: 1px solid #cecece;
}
.sidebar .widget h4.widget-title {
padding-top: 5px;
padding-bottom: 5px;
color: #d7e4ea;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
background-color: #5a8ea6;
margin-bottom: 0px;
}

.main-navigation .main-nav > ul > li:not(:last-child) {
margin-right: 10px;
}

[Tom]

Awesome, thanks for sharing the code 🙂

[Author]

Posts