Need to display nav menu BELOW custom header
-
I couldn’t figure out how to make my header image responsive on the home page, so I went into my admin pages and elected to NOT display a header image, then opened wp-blog-header.php and manually added the following above the default code:
<div class="divImgHeader"><img src="https://www.kpowbooks.com/wp-content/themes/twentyseventeen/assets/images/header.jpg" width="100%" alt="KPow Books Header" class="HdrImg" style="padding-bottom: 10px;" /></div>
I now have a responsive header image on every page of my site. I used the following CSS to make the title and subtitle not display:
div.site-branding, div.navigation-top { left: unset; -o-object-fit: unset; object-fit: unset; -ms-transform: unset; -moz-transform: unset; -webkit-transform: unset; transform: unset; top: unset; position: unset; padding-bottom: unset; } div.site-branding { display: none !important; } .HdrImg { padding-top: 50px; }
The last line of CSS was needed because the top of the image wasn’t displaying.
The big problem is that the navigation menu displays above the header image on large screens. On smaller screens, it displays below the header image (as I want it to), but there’s a big space between the header image and the top of the page.
Does anyone know how I can make my header image flush with the top of the page and make the navigation menu stay below the header image?
Thanks.
The page I need help with: [log in to see the link]
- The topic ‘Need to display nav menu BELOW custom header’ is closed to new replies.