Set max width header

Support
#1

Hey there,
I’d like to set a max width for my header bar right here http://prntscr.com/nvk2cg
thanks for your help!

#2

Hi @zerotoone.de,

Thank you for reaching out to us. You can set the max width of your header bar’s container. In header builder inspect your bar’s container (see screenshot)

Under Setup you can set the Max Width of the container (see screenshot)

Hope this helps!

#3

this does not help, I got two containers and changing the max width changed nothing

#4

Hi There @zerotoone.de

In that case, please inspect your header bar, and set content max length according to your preference.

Hope that helps.

#5

okay what should I do now? the content inside the bar is limited http://prntscr.com/nybx9x
but what about the area around it?

#6

Hi @zerotoone.de,

You can try adding this in your Bar element’s css

$el {  
    max-width:900px;
    margin:0 auto;  
}

Change 900px to adjust.

Hope that helps

#7

thank you, now the only thing left is aligning it in the center after setting the max width http://prntscr.com/nycux0
thanks for your help

#8

Hi @zerotoone.de,

Change above CSS to this:

$el {  
    max-width: 900px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

Hope this helps.

#9

still no change

#10

Hi @zerotoone.de,

Have you actually added the code that @Lely? I have checked your site and the bar setting does not have the CSS that was suggested?

Here’s how it how it should look like having the code previously suggested:

Is there a chance that you can provide us with the admin details of your site so that we can check it?

Thank you.

#11

sure added it as a secure note

#12

Hello @zerotoone.de,

Thanks for updating the thread. :slight_smile:

I checked the website and can see that the max-width for bar is set to 1200px. Please use the code shared by @Lely and save the changes.

Thanks.

#13

this does not solve the problem
bar is still on the left and not centered

#14

Hello @zerotoone.de,

Thanks for updating the thread. :slight_smile:

Please update the code with following:

$el {  
    max-width: 900px;
    left: 0;
    right: 0;
    margin-left: auto !important;
    margin-right: auto !important;
}

Thanks.

1 Like
#15

thank you, works great!

#16

You’re welcome.

#17

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