Right align nav bar - to create extra black space on the left

Support
#1

I’m trying to create a header.
Image | gap | nav bar
the nav bar is aligned to the right, with extra bar to the left with no menu items there.

I thought it would be a case of right align the items in the nav bar and add padding to the left, but this adds it to each nav bar item and not the nav bar as a whole.

Can you help?
Thanks!

#2

Hi Dave,

Thank you for writing in, that is not how it works, please remove the 2 empty containers you have. And leave only 2 containers for logo and menu.

Set these container’s Self Flex to Fill Space Equally, then the first container’s Flex Horizontal Layout to Start, and the second container to End



Apply the Black background on the second container where your navigation menu is placed.

Hope it helps,
Cheers!

#3

Great - how do I extend the black background of the nav bar to the left?

#4

Hi There,

Thanks for writing in again!

Please make the first container flex layout like the screenshot below.

And the second container like this with background color black.

Hope this helps!

#5

ok - thanks - that’s fixed the width, how do I set the height correctly. It’s too deep. I’ve tried changing the settings. The only way I can get it to work is adding a white line under the inline nav bar. This doesn’t look to be the “best” way to do it. How can I not set the height of the container (it’s greyed out) Thanks for helping - appreciated!!!

#6

Hi Dave,

Do you mean that you just wish to have a black bar with vertical alignment with the logo? Since the container is a layout, the background will be applied to the entire dimension. I like to directly check it but I can’t log in, it says internal server error. Is it part of your site’s security? Please let us know of how we could log in.

Thanks!

#7

Hi Rad,

There should be a screen shot in the private notes above.
Can you try login again. It works here, might have just been a server issue.
There’s no security on the site.

Thanks
Dave

#8

Hi There,

the login is still not working for us.
Can you please check for any security setting and let us know.

Thanks

#9

login is fine - nothing in the error logs.

Can I send the login details via
Lastpass or manageWP?

see if that helps.
Thanks
Dave

#10

Hello Dave,

I have logged in to your site. Please edit your custom header and add a space container in between the logo and the menu containers.

You can add left and right margin of this container if you want to widen the gap between the other containers.

Hope this helps.

#11

great - any improvement on adding a line below the other container? it just seems boring to me - I though there would be a way to control the height.

#12

Hello @dave_syntax21,

You can add a bottom border for your menu container.

Hope this helps.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.