Archived topic
Same bacground on nav and header
3 replies · Started by david on December 14, 2020
Hi,
I'm making a new site here https://irishsteveseaves.ca/
I want to have a background image that only covers the header area (where the logo is) and the main navigation menu.
I want to use the green background i have on the nav right now.
I want just 1 image as I don't want people to see the join.. As i could just put this image in twice, once on the nav as I have and once on the header area which is white now.
But I'd like it to look better and just have 1 image that covers both areas.. is this possible?
Hi,
But I’d like it to look better and just have 1 image that covers both areas.. is this possible?
This is possible but we'll have to change the Header Presets back to default so both the nav bar and the logo are wrapped within <header id="masthead">.
Once they're wrapped within the header tag, you can try playing around with the CSS to achieve the same layout:
Example:
.site-logo{
width: 100%;
display:block;
text-align: center;
margin: 5px 0px 15px 0;
}
header#masthead .inside-header{
flex-wrap: wrap;
}
header#masthead{
background-color: red; /* replace this with the green background-image */
}Thanks for the reply.
Is changing back to default easy to do?
Hi there,
go to Customizer > Layout > Primary Navigation and set the Location to Float Right.
Then remove the background image from the Navigation and add it to the Header.
Once thats done, let me know and we'll provide some CSS to place the nav below the logo.
