Archived topic
css to create space between main navigation buttons
3 replies · Started by Joanne Smith on March 15, 2016
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
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;
}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;
}
Awesome, thanks for sharing the code :)