Move navigation bar down

johnmolsoninvestmentsociety · Member · Jul 10, 2014 at 4:45 pm
Copy link

Add topic to favorites
Hi,

I was wondering how I can move the blue navigation bar on my site? It’s overlapping with the header right now but I want it to be at the bottom of the header so that it’s not in the way. I’m relatively new to CSS so I don’t know how to do the coding for that. I’m using the organization theme.

Cheers!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 10, 2014 at 9:09 pm
Copy link
Hi there, add the following custom CSS and see what you think. It move the blue navigation bar down below the image and spaces the sidebar and content down to make room for it. I’ve limited this change, using a Media Query to browser window/screen widths 768px or wider since that is when the menu changes to the minified version for tablets and phones.
```
@media screen and (min-width: 768px) {
    #navigation {
        position: relative;
        top: 350px;
    }
    .eight, .four {
        padding-top: 70px
    }
}
```
johnmolsoninvestmentsociety · Member · Jul 11, 2014 at 1:39 am
Copy link
Wow! Thanks, that’s exactly what I was looking for!
thesacredpath · Member · Jul 11, 2014 at 3:11 am
Copy link
You are welcome.
johnmolsoninvestmentsociety · Member · Jul 11, 2014 at 3:53 pm
Copy link
Sorry, one more question regarding the nav bar: How do I edit the CSS so that each of the tabs are spread out evenly on the navigation bar? I don’t want any empty blue space on the right.
designsimply · Member · Jul 14, 2014 at 9:59 pm
Copy link
There are a few different possible ways to do that.

One way could be to center the main menu list and then add padding around the sides of each menu item to add extra space between them. Here is an example. You should add this inside the @media block that thesacredpath posted earlier:
```
#navigation .menu-container {
	text-align: center;
	line-height: 1em;
}
#navigation .menu-container .menu {
	display: inline-block;
}
#navigation .menu-container .menu > li {
	padding: 0 1.5em;
}
```
Another possibility would be to use a new display value in CSS3 called flex. Combined with “display: flex,” you can use the “justify-content” property to distribute the extra white space between all the elements evenly. This one is a newer method though, and so it only works in modern browsers. Older browsers would still display the menu spacing the original way but newer browsers could show even spacing with less code. Here is an example:
```
#navigation .menu-container .menu {
	display: flex;
	justify-content: space-between;
}
```
Try out both and see what you like best. Keep in mind that both should be added inside the @media block from before so the new CSS doesn’t interfere with the responsive design used for smaller screens.

No items found.