Need to display nav menu BELOW custom header

  • WPOso

    (@wordpress-oso)


    6 years, 5 months ago

    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]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter WPOso

    (@wordpress-oso)

    Update: I’m now experimenting with the following code, which just about fixes the problem on bigger screens, but it falls apart on smaller screens.

    div.site-branding { display: none !important; }
div.navigation-top { margin-top: 200px; }

.HdrImg { position: relative; bottom: 100px; padding-top: 75px; }
    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    Moved to Fixing WordPress, this is not an Everything else WordPress topic.

    Thread Starter WPOso

    (@wordpress-oso)

    Please disregard my question. I just figured out the obvious answer: Use a background image instead of a static header image. That solves just about everything.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Need to display nav menu BELOW custom header’ is closed to new replies.