[Support request] Background Banner Image for Headr/Nav Menu

[Scott]

Hello Support Team!

I’ve been working for hours trying to implement a simple banner image in my header that merges the nav menu. I’ve tried many of the ways recommended in the forum, and nothing has quite worked. The image either doesn’t show or gets cut off. Time to call in the pros. Currently, I have the image as a header background image loaded in through the customizer. A link to my staging site is included to see what I am trying to do. I am also using a sticky menu with scrolling and that is working correctly. I want to apply this header to every page on the site.

I would like:
1. The main nav bar to merge up into the image and the top bar to merge down into it so that it looks like they are all incorporated into the header image.

2. The image on mobile isn’t sizing correctly.

Thanks for your help – I’ve hit the point of utter confusion!
Scott

[David]

Hi there,

yeah i must admit, that can be tricky:Can you:

1. Customizer > Layout > Primary Navigation and set its Location to Float Right.
2. Customizer > Colors and set the Top Background to transparent.
3. Remove any CSS you may have added relating to the site header.

Then let me know, and ill take a look at making the overlay work.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Scott]

It’s definitely had my head spinning today…

1. done
2. top bar background set to transparent
3. done

cleared the cache too while I was as it,

THANKS!

[David]

Ok, now:

1. remove the background image from the Header. As we need it contained.

2. Add this CSS:

.site-header .inside-header {
    background-image: url('https://vdh02jdym2-staging.onrocket.site/wp-content/uploads/2022/10/GWG-SITE-HEADER-light-1280-×-200-px.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 15vw;
    display: flex;
    padding: 0 40px;
}
.nav-float-right #site-navigation {
    margin-top: auto;
    margin-right: auto;
}
@media(min-width: 1280px) {
    .site-header .inside-header {
        max-height: 200px;
    }
}
@media(min-width: 768px) {
    .site-header {
        margin-top: -40px;
    }
    .top-bar {
        position: relative;
        z-index: 1;
    }
}

How does that look for desktop ?

As we need to talk about what to do with Mobile 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Scott]

Desktop looks great!

For mobile – I have an off-canvas panel that works well for me. I mainly just want the new header image to fill the top of the screen and change to the sticky menu when scrolling. It’s no problem for me to upload a separate image of a different size if needed. Just let me know what you recommend

THANKS!

[David]

Great.
Ok, so theres some in-between screen sizes that need a bit of attention.
At around an 1100px viewport, the navigation wraps to two lines, so it covers a lot of the image.

Options for that:

a. you could increase the Customizer > Layout > Primary Nav -> Mobile Menu Breakpoint to 1100px to switch to mobile header earlier.

b. reduce the font size of the nav elements or the Customizer > Layout > Primary Nav -> Menu Item Width

c. drop some items from the menu

For the mobile header itself, would more of a logo image work there?
If so you can enable the Customizer > Layout > header -> Mobile header where you can add its own logo.

Let me know

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts