Help with Pro header + CSS code for header

[WillWashington]

Hi again guys, I have another 2x questions regarding the header on my website:

1. If you see in the screen shot below the area in red there is no gap/margin between the background image and the very top of the page, I would like the background image to be centred with a small margin, for example 0.5em so it’s not touching just the edge of the page, I created the image as a PNG instead of a JPG and don’t want to use a JPG file with a background, is there a way to achieve this margin? I was trying to do it but could not figure it out…

2. if you see in the first screen shot the menu hamburger is ‘black’ like the rest of the menu bar items however when you scroll, I am using some CSS code to change the other menu items from ‘black’ to white, for example in the logo on the left I use
   /* nav bar logo change */
   .logo2 {
   display:none;
   }

.x-bar-fixed .logo1 {
display:none;
}

.x-bar-fixed .logo2 {
display:block;
}

I would like to know how I can achieve the same effect applied to the hamburger drop down menu so when it’s in the top un-scrolled position it appears ‘black’ as it is and when you scroll and the nav bar becomes sticky it shows it as white within the purple bar, the same as my uber menu does and the logo.

Thank you guys in advance.

[rad]

Hi William,

Thanks for reaching out.

1. That should be padding instead of margin, though, it’s not applicable for background image. The solution is changing the background size to something like this instead of contain

That means 90% height, and 5% space for both top and bottom. But again, 0.5em isn’t possible since it should be responsive.

2. It’s possible, simply add this CSS to your header bar’s Element CSS with your preferred color

$el:not([style=""]) .x-anchor-toggle .x-toggle {
    color: #fff;
}

Hope this helps.

[WillWashington]

Hi the code

$el:not([style=""]) .x-anchor-toggle .x-toggle {
color: #fff;
}

just changes the hamburger menu to #fff all the time, what I want to achieve is that when it’s in the initial position at the top of the page it’s in black (the color of the hamburger menu its self) and then ONLY when it re-appears in the bar with the purple background does it show the white, - if you see on my page https://easystartup.net that the text of the uber menu, and the logo are black initially and then when you scroll down the page as the purple sticky bar appears after a short delay it shows the uber menu in white instead of black, I want to achieve this same effect with the hamburger menu graphic, thank you I hope you can help.

The replies regarding the wallpaper using auto 90%~ worked like a charm and helped me to fix some other bits on my site also, thank you.

[rad]

Hi William,

Please make sure it’s added to header bar’s Element CSS and not on header bar’s container Element CSS. I can see it from the code by comparing the ID. The header bar has e1905-1 while the container has e1905-7, you placed it in the wrong element, please move the CSS to the correct one.

Thanks!