Change width of header bar

Support
#1

Hey there,
I’d like to change the width of my header bar like this and add a negative margin to it, so it overlaps with section above it.
Thanks for your help!
this is my page https://siyuanyu.com/

#2

Hello @zerotoone.de,

Thanks for updating the thread.

You can add following CSS under Bar > Customize > Element CSS:

$el{width:500px; margin: 0 auto;}

Thanks.

#3

thank you thats perfect, I added a negative margin on top but the content of the bar slipped to the top http://prntscr.com/jki8k5
can you help me with that? :slight_smile:

#4

Hi,

Upon checking, it looks like you already have fixed the issue?

Please let us know if you still need help on this.

Thanks

#5

no thats actually the issue, the the columns of the logo and the menu? they are lifted above their bar.

I just set the background of the bar to red so you can see the issue

#6

Hi There,

Thanks for the confirmation!

The issue is due to the same class name for parent and child element. Which is moving the child element too.

Can you try adding the -ve margin via custom CSS?
Example.

.e15-3.x-bar {
 margin-top: -50%; /*you can change the valu*/
}

The CSS shoud goes in side Header -> Global CSS

Hope this helps!

Thanks

#7

thanks, not sure what is should achieve, but adding this line in custom css did not help.
so far I added the code from your first reply to the bar element. All I want to do now is lift the whole bar with the logo and menu, so it overlaps the image :slight_smile:

#8

It worked, just wasn’t visible in the header editor thank you!

#9

You are most welcome!

#10

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