[Support request] Use Navigation as Header causes the tagline to disappear

[surfing]

I’m having an issue where the tagline disappears when I check the box “Use Navigation as Header” under Customization > Layout > Header. Checking the box aligns the logo, site name and primary navigation perfectly but I lose the tagline.

How do I keep the tagline and have it appear just under the site name?

Alternatively, I can keep the box unchecked but then have to figure out how to get the logo, site name, tagline and primary navigation to align the way I want. This seems like much more work.

Thanks! This theme is great!

[David]

Hi there,

the Navigation as Header only supports the Site Title branding, its possible to add the tagline but actually requires more work then styling the standard header.

If you can set the site up with the usual header and your Navigation set to float right, and share a link to the site we can take a look at styling it for you.

You can edit your original topic and use the Site URL field to share your link privately.

[surfing]

Thanks for the reply. I have shared the website link and made the following adjustments in the customizer.
Layout > Primary navigation then set:

Navigation Location = float right
Navigation Alignment = right

[David]

So next we need to reduce the site title font-size a little in Customizer > Typography > Header – set it to 35px to start with.

Then add this CSS:

@media (min-width: 769px) {

    .inside-header,
    .main-navigation ul {
        display: flex;
        align-items: center;
    }

    .site-logo {
        order: -1;
        margin-right: 10px;
    }

    .site-branding {
        margin-right: auto;
    }
}

[surfing]

Thanks for your help. I reduced it to 32px and inserted the CSS. It looks great on desktop with the browser at full size. However, when I resize on desktop to a smaller screen size it doesn’t look good. Mobile looks good. Can you please take a look?

[Tom]

Hi there,

Which width are you referring to? Mobile itself just has the logo (which is nice, as space is limited). Are you wanting to add the site title/tagline on mobile as well?

[surfing]

Thanks for the reply. When the browser is resized to 1070 and lower but before mobile, it looks really bad. It might have something to do with the patient portal link (far right nav item) I styled it with CSS. I tried commenting out the CSS but it doesn’t seem to make a difference.

Site title will be nice for mobile. The tagline will be nice too, if it doesn’t look too crowded.

[David]

Problem is there isn’t a lot of room, so choices are either to break to mobile header earlier or force the navigation below the site title when it clashes.

The first one you can set in the Layout > Header –> Mobile header > Breakpoint

The second in Layout > Primary Navigation –> Navigation Drop Point

The only other alternative to give it more space by increasing the container width or reducing the font sizes and menu spaces

Let us know.

[surfing]

OK, I will investigate the different breakpoints. Can you look at the much more important issue which is the REALLY bad display when the browser is resized to 1070 and lower but before mobile? Are you suggesting I make the break point at 1070? That seems awfully large.

[David]

the just some of the options that will stop the navigation from ‘crashing’ into the site title.
Its either use a wider container, reduce the size of the fonts in the header or force the nav to either drop below the site title or for it to break to mobile.

[surfing]

Thanks for explaining the options. How do I force the nav below the site title? Can this happen at 1070 and then go full mobile at 769px?

Alternatively, what’s involved in making it go to mobile at 1070px? Do I have to change the CSS you provided above?

[David]

Go to Customizer > Layout > Primary Navigation and in the Navigation Drop Point field add the 1070
Once thats done i can check the CSS to make sure it works correctly.

[surfing]

OK I have changed it to 1070. Please have a look. It looks bad when it breaks at 1070, the logo is centered but not the site name. It looks unprofessional.

[surfing]

I’m not sure if this is related but when scrolling back up the header (logo, site name, title) with navigation is suppose to display. However, only the navigation displays and it is left instead of its original position. I also want the top bar to display when scrolling up but am not sure how to do this. Any help will be appreciated.

[David]

This CSS will fix the issue when the navigation drop off point is reached:

@media (max-width: 1070px) and (min-width: 769px) {
    .inside-header {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

So sticky Nav – few queries here. We can add hook in the Site title and possible the tag line into the navigation. Which may mean undoing what we have already done – but as you experienced from the nav clashing on smaller screens what would be the workaround here? Would you break to mobile header earlier? Let me know.

To make the top bar sticky as well is possible with CSS but would require custom development to get them both to only show on scroll up – thats a lot more complicated.

[Author]

Posts