Hi Fabio,
Sorry I assumed you want it to the whole header as you say single BG image for the whole Header
.masthead is for the whole header. Can you provide us a screenshot or a mockup on how you would like your header to look like.
Thanks
Hey @paul.r I actually want it for the whole header, but using .masthead doesn’t appear anywhere. If I use header instead, it appears (as you can check on the provided link), but then it also appears on headers of posts, widgets, etcetera… I want it to be applied to the Masthead area, so if I have a persistent Menu it also locks with the image under the menu, right? But the .masthead isn’t being applied…
This is what I have now on my Header CSS:
header {
background-image: url("/wp-content/uploads/sites/2/2019/05/bg-bordo-ataque-thriller.jpg");
background-size: 100% 100%;
}
As said, it applies also to widget headers, post headers, so it’s not the way to go. I hope we can find a way to have it on the whole header, and if I select Persistent Bar option, the BG image stays with the Header stick on the top…
Hi fabio,
Sorry, I was looking at the page that wasn’t using PRO Header.
For the one that is using PRO Header you can change the css code to this
.x-masthead {
background-image:url(background.jpg);
background-size:cover;
background-position:center center;
}
You need to add that code in Header > CSS and not in Theme Options > CSS
That way, it will only take effect for that specific PRO Header.
Hope that helps
Working fine @paul.r, but if I choose “Persistent Bar” and scroll up, the BG image goes up and leaves the Persistent Bar transparent… Is there a way to keep the BG image “stick” with the bar on the top?
Hi Fabio,
That’s the issue of using CSS, it’s not synced with header bars as they are controlled by both CSS and Javascript. The header bar where the background should has active sticky feature as the header bar where menu is, so they can move in sync. Unfortunately, the only way and recommended workaround is through header bars and its features. What I provided was just to help you get started by using an existing template, you can then play with its settings and make sure both header bars (one with backgrounds and one with menu) have both sticky option active.
Again, that’s two header bar (for background and for menu, you’re not directly adding the background to header where menu is).
Thanks!
I’m not sure I understood your statement. Will the BG get sticky if both bars are sticky? Or there’s no way to have the BG sticky with the bar(s)? Thanks!
Hey Fabio,
Yes you can do this too with CSS, simply replace the previous code with the following:
.x-masthead, .x-masthead .x-bar-fixed {
background-image: url(/wp-content/uploads/sites/2/2019/05/bg-bordo-ataque-thriller.jpg);
background-size: 100% 100%;
}
Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!
I’m also having this issue on the mobile menu (mobile viewports) where the burger (mobile) menu is being moved out of the viewport… Any way to fix this?
Hi Fabio,
I just checked and the mobile burger menu stays on its position and doesn’t overflow outside the viewport. May I know which browser this happens? I tested it on latest Safari.
Thanks!
Hey @Rad thank you again for your reply.
I’ve been diggin’ and learning, and I’ve managed to make it appear.
For now, the hard thing is to show the top (Social) bar on small viewports: I can’t understand how to make it appear on smaller screen viewports… I would be glad if I can get some help with that.
Thank you again, cheers!
Hi Fabio,
You can use our hide during breakpoints feature to show your header bars, containers or elements in different view ports such as mobile, tablets and desktops. Please review our detailed guide here for more information (https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378).
So in your case, you can add a bar which is only displays on mobile screens and then you can place your social icons there.
Hope that helps.
Thank you @mldarshana
I know how to Hide based on Breakpoints. I’ve duplicated and chosen to hide the normal one (Social icons on the right) for small screens, and hide the small one (Social icons on the center of the screen) on big screens.
But for some (of the hundreds of) settings, the Small Screens Version doesn’t appear anyway on small screens either. I’m sure there’s some other setting I should change but there are so many options (and a lack of documentation on how to use them) that I don’t know how to obtain the results.
I hope some of you amazing support guys can help me finding my way. I"ll keep looking forward from you all (thanks also to @Rad and @paul.r for your help!), cheers!
Hi @fabiofava,
Currently, your header looks good on small screen sizes:
Can you please tell us what you want to customize the background image of header on small screen sizes?
Thank you.
Hey @thai thank you for your reply.
Actually, you can’t see the Social Icons on the top of the page (above the menu/logo) as they’re supposed to appear. Take a look on a bigger screen than you’ll see. Even having it repeated for small screens, and blocked on the larger viewports (also blocked the “big-screens” right-side social for small screens). It shows on big viewports but not on small ones… Please let me know wich other settings I should change in order to have my social icons on the mobile screens.
Cheers!
Hi Favio,
It was hidden using the container settings. Please inspect the container of the social icons. Go to Customize Tab > HIDE BASED ON SCREEN WIDTH.: Make sure nothing is selected.
Also, if you do have other questions after this, it would be better to open a new thread. Thanks.
I’ve managed to make it working by duplicating bars (since they override container’s and elements alignment -> elements should override containers, that should override bars in my humble opinion (inner it is, overrides the outer element). But seems to be working. Thanks!
Glad you were able to figure it out. Have a great day! 
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.