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

Home Forums Support Use Navigation as Header causes the tagline to disappear

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #910323
    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!

    #910378
    David
    Staff
    Customer Support

    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.

    #910670
    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

    #910756
    David
    Staff
    Customer Support

    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;
        }
    }
    #910774
    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?

    #910862
    Tom
    Lead Developer
    Lead Developer

    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?

    #910889
    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.

    #910890
    David
    Staff
    Customer Support

    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.

    #910892
    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.

    #910895
    David
    Staff
    Customer Support

    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.

    #910899
    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?

    #911065
    David
    Staff
    Customer Support

    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.

    #911505
    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.

    #911522
    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.

    #911901
    David
    Staff
    Customer Support

    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.

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.