Center Menu Without Moving Search Bar

Activello
1

Hi,

while trying to center the navigation I read through previous recommendations and found the following solution:

@media (min-width: 767px){

.navbar-default .navbar-collapse {
    float: none;
    margin: 0 auto;
    display: table !important;
}
}

However, when applying this code the search bar changes position and appears lower than the main menu. Is there a way to center the menu while keeping the position of the search bar?

I would love to make this change in the main CSS Stylesheet and would be very thankful for your help.

Kind regards
Lena

2

Hello,

I have the same issue, I would like the search bar and the menu on the same line.
Thanks in advance for your help!

Best,

Joanna

3

Hi Lena,

I hope you are well today and thank you for your question.

Instead of using the CSS code that you shared you can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS

@media (min-width: 767px){

.site-navigation-inner {
    float: none;
    margin: 0 auto;
    display: table !important;
    width: auto;
}
}

Best Regards,
Movin

4

Thanks for the reply.
I’m afraid this is not working for me: http://www.nito-onna.com/
The Search bar is stays below the main menu for some reason… :frowning:

Best,

5

Dear Movin,

thank you very much for your support! This works perfectly well for me :). However, I do have less (and shorter) menu items than slickponies does.

Thanks again and kind regards,
Lena

6

@slickponies I have tested adding the shared CSS code in the browser inspector on your site and it is working fine as shown in the attached screenshot.

You have to remove the existing custom CSS code added on your site to centre align the menu and also the following CSS code that hides search form in the menu.

@media (min-width: 767px){
.navbar-default .nav-search {
 display: none;
}
}