Center the navigation bar content

Sparkling
1

Hello,

I am wondering, is it possible to center the navigation bar content (menu).
As shown on the screenshot provided, it is on the left. But is it possible to make the content centered. I have my header with logo and name centered, so I want the menu to appear underneath.
Hope to hear from you.

Best regards
Orlando

2

Hi Orlando,

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

You can try achieving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

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

.navbar-default .navbar-collapse {
    display: table !important;
    text-align: center;
    margin: 0 auto;
}

Best Regards,
Movin

3

Hello, again, sadly it did not work. Do you have any other options that we could try?
I let the code be in there in case you want to experiment with the code. I am using Google Chrome, but have checked with both FireFox and Safari in order to be sure before I sent this reply.

Best regards Orlando.

4

Could you please share me your site URL where it’s not working so that i can troubleshoot it?

5

www.owlando.com

6

I visited your site and it’s not working on your site because of the custom width applied on navigation so please try using the below CSS code to make it work by removing the above previously shared code.

@media (min-width: 768px){
.navbar-default .navbar-collapse {
    display: table !important;
    text-align: center;
    margin: 0 auto;
    width: auto !important;
    clear: both;
}
}
7

Hello again and thanks for the help, this code works and centers the menu bar content.
Sadly I recently found out that when the screen resolution gets over a certain size the navigation bar totally messes up (see provided screenshot). My site is www.owlando.com.
Is it possible to fix it so that the navigation bar will remain in place no matter what resolution it is?
I have no issues with it becoming a hamburger menu for mobile devices though, that is fine. But I want it to display properly even on large screens. Hope you can help me with this.

Best regards
Orlando

8

I tested it visiting your site on various screen size but didn’t face any such issue.

Could you please tell me exactly on what screen size it is happening so that i can troubleshoot it?

Also please try clearing your browser cache and using different browser.

9

It was viewed on the 21.5" Imac, with a resolution of 1920x1080. The problem happened a lot earlier than this while resizing the window, and I have tried this with different computers and browsers and still get the same problem. It starts out showing properly, but as you make the browser window bigger,the menu bar suddenly appears in the position shown on the previous screenshot.

Best regard
Orlando

10

Could you please tell me exactly on what screen size it is happening instead of screen resolution so that i can troubleshoot it?

Also it may be happening when you logged in to your site so please try testing it after logging out from the site.

11

Then please tell me how do I give you the exact resolution? I am just resizing the browser window, so I have no idea what the size is when it happens. Please advise on how to give you that information.

I have tested while both being logged in and out of the site, both in Chrome, Safari and FireFox, don´t care about if it works in Internet explorer or not and I don´t have access to that browser anyways.It was the same error there as well.

12

You can find out screen size of browser by using the below tools and share me the screenshot of it.

http://whatsmy.browsersize.com/

13

Thank you, that site was very helpful.

The problem starts when it reaches this resolution: 778px height x1384px width.

The problem appears from the width 1384px and continues on from there on and out as far as one can test. All sizes below that in width is fine, it only appears from the mentioned width and on.
The height does not seem to have an influence as I have tried different height sizes as well.

Hope you can help, best regards
Orlando.

14

I could confirm the issue on that screen size and to resolve the issue i have modified my previously shared CSS code.

Please try using the updated CSS code replacing previously provided CSS code.