How to add space on upper border of navigation bar

Hi Aigars and Movin,

Just wondering how I would add space between the upper navigation border and the upper (black) bar of my site. In my case, I would like for the logo, menu, search, etc to remain as they are - I would just like some more white space (between the upper navigation border and lower border of upper black bar). Ultimately, I do want the logo to be so close to the upper black bar.

Thanks in advance,

WP: 4.2.2
Dazzling: current
Site: curlyafrodotcom

Hi @4alex,

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

You can add the space in between them by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS

.navbar .nav.navbar-nav {
  margin-top: 15px;
}

You can change the value of margin top in the above code to change the size of space.

Best Regards,
Movin

Thanks Movin,

I was able to figure it out via the following (I tried the above suggestion but increased the lower border margin instead):

  1. Appearance>Theme Options> Other
  2. Place code -

.navbar-default.navbar {
margin-top: 14px;
}

Any issues on your end with code?

Regards,

Hi @4alex,

I have just tested it again and it’s working fine for me using the code that i have shared.

Have you tried using the code that i have shared instead of the code that you have shared?

Could you please also share the screenshot where you want to add space so that if there is any misunderstanding then we can resolve it?

Regards,
Movin

Hi @4alex,

Here’s the attached screenshot where my shared code is increasing the space.

Thanks,
Movin

Hi Movin; thanks so much for your help.

At this time, I am not able to provide a screenshot, but if you look at curlyafrodotcom you will see with your code, the upper margin of logo (namely, C l A f) almost touches the lower border of black bar. I would like the reverse with the logo (namely, y and f) almost touching the lower border of navigation bar with space between the upper margin of logo (namely C,l A f) and the lower border of black bar. . With my code I get the intended changes, but not sure if the best code to have?

Any suggestions?

Regards,

Hi @4alex,

Thank you for making it clear.

You can achieve by using the following CSS code and removing the previously shared code.

div#logo {
  margin-top: 3px;
}

Best Regards,
Movin

Thanks Movin,

Is it possible to increase the space (between the C, l, f and the lower border of black bar) while also keeping the highlighted/active menu item (red) resting on navigation line (black)? When I try and increase the values, the red line shifts upwards instead of remaining on the black line.

Regards,

Hi @4alex,

I am not sure what you are referring as “C, l, f” and also it’s a bit hard for me to understand what you are trying to achieve so could you please share the screenshot like i have shared previously pointing to the exact space in it?

Regards,
Movin

Hi Movin,

My apologies for any misunderstanding.

With reference to the C, l, A, f, I mean the letters in the logo. As indicated via attached screenshot, the upper borders of these letters are too close to the lower border of the black bar. I would like to be able to maintain everything else on as per screenshot, but increase the space between the upper borders of said letters and lower border of black bar.

Thanking you in advance,

Hi @4alex,

Thank you for explaining it and making it clear.

You can increase the space between the upper borders of said letters and lower border of black bar by
changing the margin top value of the code provided in this reply as displayed below.

div#logo {
  margin-top: 14px;
}

You can change the value 14px in the above code according to the space you want.

Regards,
Movin

Thank you Movin for your reply.

I implemented the above reply, but again, as per attached, the active menu item (underline) floats upwards instead of staying on the lower border of navigation menu. Also, the other menu items and search box also float upwards - throwing the vertical symmetry of the menu and search box in relation to the logo. Is there a way to remedy this?

Thanks in advance,

Hi @4alex,

You can try using the following CSS code replacing all the code shared previously.

.navbar-default .navbar-nav {
  margin-top: 11px;
}
div#logo {
  margin-top: 14px;
}

If the above solution doesn’t help you then please share the screenshot making some basic wire frame changes in it to show me how you want it to display as i am not getting exactly what you are trying to achieve.

Regards,
Movin

Thanks Movin; the above code works perfectly!

Regards,

You are most welcome here :slight_smile: