Change padding/margins on navigation header

Hi! The only way I could get my header image to expand across the entire screen was with some custom CSS as shown on the screen. The only issue is now my navigation has 0px space on the right and left. I'd like to add some px (maybe 10-30?) on each side. How do I do this just for the navigation? I'm also open to alternatives if my original idea of deleting all margins was a bad one.

Additionally - I set me button settings to be bold and all caps text like the navigation text, but for some reason it wont show up in the navigation button. how do I fix?

Thanks!

password to website: password

22 minutes ago, Jl87 said:

Hi! The only way I could get my header image to expand across the entire screen was with some custom CSS as shown on the screen. The only issue is now my navigation has 0px space on the right and left. I'd like to add some px (maybe 10-30?) on each side. How do I do this just for the navigation? I'm also open to alternatives if my original idea of deleting all margins was a bad one.

Additionally - I set me button settings to be bold and all caps text like the navigation text, but for some reason it wont show up in the navigation button. how do I fix?

Thanks!

password to website: password

Can you share your website URL?

sorry! dont know why it didnt share: www.gtmenabler.com

12 minutes ago, Jl87 said:

sorry! dont know why it didnt share: www.gtmenabler.com

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

.header-announcement-bar-wrapper {
    padding-right: 30px !important;
    padding-left: 30px !important;
}

Thank you! Additionally - I set my button settings to be bold and all caps text like the navigation text, but for some reason the button in the navigation that I added it wont show up like that (its not bold or all caps). how do I fix?

3 minutes ago, Jl87 said:

Thank you! Additionally - I set my button settings to be bold and all caps text like the navigation text, but for some reason the button in the navigation that I added it wont show up like that (its not bold or all caps). how do I fix?

Add the code

.header-actions-action--cta *{
    font-weight: bold !important;
    text-transform: uppercase !important;
}

1 hour ago, Jl87 said:

The only way I could get my header image to expand across the entire screen was with some custom CSS as shown on the screen. 

Hi, how did you "delete" all your site margins? I can see your site-wide margin is set to 0, but this can be done in Site Styles without using Custom CSS. I would suggest doing it via Site Styles to keep it less confusing to maintain, unless there is a specific reason to do it via Custom CSS.

1 hour ago, Jl87 said:

How do I do this just for the navigation? I'm also open to alternatives if my original idea of deleting all margins was a bad one.

You can target just the navigation bar margins like @Web_Solutions has provided above. I would suggest not setting Site wide margins to be zero, because then you come into issues like this page

https://www.gtmenabler.com/enablerblog

Unless this is the desired effect, all blog posts to be right up against the screen edges?

8 minutes ago, melody495 said:

Hi, how did you "delete" all your site margins? I can see your site-wide margin is set to 0, but this can be done in Site Styles without using Custom CSS. I would suggest doing it via Site Styles to keep it less confusing to maintain, unless there is a specific reason to do it via Custom CSS.

You can target just the navigation bar margins like @Web_Solutions has provided above. I would suggest not setting Site wide margins to be zero, because then you come into issues like this page

https://www.gtmenabler.com/enablerblog

Unless this is the desired effect, all blog posts to be right up against the screen edges?

Sorry. I did it via the Site Styles. The reason I wanted 0 margins, is because no matter what I did, my banner image for a background image kept showing white space on the sides. See image for example. The only way to avoid that (of which I knew!) was margin to 0. 

5 hours ago, Jl87 said:

my banner image for a background image kept showing white space on the sides. 

You shouldn't have to change site margins to achieve this. 

It looks like you've set the background image as "inset". Changing it to "full bleed" would make the image fill the section without any spaces around.

Edit Section -> Background -> under Background Width, choose Full Bleed. You would have to set your site wide margin to non-zero to see the difference.

I tried that. It stretches the image weird and no matter where I move the focal point or how I change the height of the image, it wont put the full image in view. See screenshot below. Any suggestions?

On 12/1/2023 at 12:55 AM, Jl87 said:

I tried that. It stretches the image weird and no matter where I move the focal point or how I change the height of the image, it wont put the full image in view. 

You will need to increase the section height, because with full bleed your image is bigger. 

If you don't like how it looks, and don't want to adjust the site wide margin to accommodate this image, you can instead of adding the image as a section background image, add an image block to your section and adjust to the size so it fits edge-to-edge.

Yes. I did all of this. I originally added just as image block and it wouldn’t show right now matter how I adjusted. Then I tried the full bleed and it got funky again.

On 12/1/2023 at 12:55 AM, Jl87 said:

I tried that. It stretches the image weird and no matter where I move the focal point or how I change the height of the image, it wont put the full image in view. See screenshot below. Any suggestions?

 

Your image is not stretched in your screenshot here. You simply need to increase your section height so that the image has enough space to fit.

9 minutes ago, Jl87 said:

Yes. I did all of this. I originally added just as image block and it wouldn’t show right now matter how I adjusted. Then I tried the full bleed and it got funky again.

Part of the issue is that your text is part of the image. If you use a text block for your hero text, then the text will be responsive independent to your background image. 

But anyway, looks like you've found a way to make it work for you. This only becomes an issue if in the future you decide to change your site margins.