Navbar size and position

Unite Theme
1

Hello!
Thank you very much for this excellent theme. I have a question. I would like to make my main menu (navigation bar) less wide (about 50%) and position it in the middle of the page. How would I do this correctly so that the responsiveness is kept intact?

2

Add this to Theme Options - Other - Custom CSS and see if this is what you were looking for. In looks strange to me but this is how you described it.

nav.navbar.navbar-default {
    width: 50%;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}
3

Yup thats what I wanted.
It now looks like this http://my.jetscreenshot.com/demo/20140510-4xzr-106kb
is there any way to make the menu items “centered” so that the gap after the “English” item isnt so big? So that its either not there at all or the gap is the same size on both sides?
Thank you very much for your help. :slight_smile:

4

Add this code to Child Theme style.css or some Custom CSS code editor such as one comes with Jetpack.

It could be added to Theme Options but it is too specific and you will run into encoding issues with > characters.

.navbar-nav > li > a {
  padding-left: 20px;
  padding-right: 20px;
}

You can tweak these values accordingly to make all item perfectly distributed across the entire header menu.

5

That is perfect, thank you very much!
I swear this is the last question.
Is there any way to make the menu stop going on two lines when the window is made smaller? This is what it looks like now, when the size of the window is reduced: http://my.jetscreenshot.com/demo/20140510-ohb2-53kb.jpg. I find this kind of odd looking and would prefer the menu to stay on one line and reduce its size as a whole, if you know what I mean. Do you think this is possible and how is it done?
Thanks again!

6

Then you might try to play around percentage values instead of px but this might be harder than you think. There is definitely no easy solution for this if you want to keep it responsive.

7

Hey, thanks again for all your help. I’ve tried playing around with the values and nothing had the effect I wanted, so in the end I installed a plugin for the menu called Mega Main Menu and the results are close to what I wanted, so I’ll just keep it for the time being.
Thanks again for all your awesome work and have a nice day!