How to center navigation bar and logo

Dazzling
1

Hi Aigars & Movin,

Just wondering if you could suggest how to:

  1. Center logo (so logo is above navigation bar)

  2. Center navigation bar

(Sidebar: Once done, will it be possible to add top and bottom borders to just cover the menu items and search box?)

Site: curlyafrodotcom
WP: Current
Dazzling: Current

Thanks,

2

Hi @4alex,

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 your theme on the below path.

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

@media (min-width: 768px){
div.navbar-header {
    float: none;
    text-align: center;
}
.collapse.navbar-collapse.navbar-ex1-collapse {
    float: none;
    clear: both;
    display: table!important;
    margin: 0 auto;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}
}

Best Regards,
Movin

3

Hi Movin,

Thanks so much for the above; I hadn’t realised you responded so long ago (my apologies for the delay in acknowledgement). Is it possible to have more space between the top navigation border and the logo? Also, is it possible to have a greater space for a bigger logo (i.e. greater than 300x66px)

Thanks again in advance,

4

Hi Movin,

Please ignore the last post; I sorted it out! Again, thanks so much for everything.

5

You are most welcome here :slight_smile:

6

Hi Movin,

Thanks for everything again; upon reflection, do you have suggestions to increase the space between the top border of navigation table and logo. (Apologies in advance!)

Thanks,

7

Sure you can achieve this by changing the shared CSS code as below.

@media (min-width: 768px){
div.navbar-header {
    float: none;
    text-align: center;
}
.collapse.navbar-collapse.navbar-ex1-collapse {
    float: none;
    clear: both;
    display: table!important;
    margin: 0 auto;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    margin-top: 20px;
}
}
8

Hi Movin,

Thanks for the reply.
I added the last line “margin-top: 20px” to the previously shared code but did not get desired result of increase space between the logo and top line of navigation table. Essentially, I would like the “y” of CurlyAfro to not sit on the top line of tables.

Any suggestions?

Thanks in advance,

9

I visited your site and found you have added it incorrectly as following

top-margin: 20px;

Instead it should be as following.

margin-top: 20px;

10

Thanks so much Movin; worked perfectly!

11

You are always welcome here :slight_smile: