[Resolved] Change look of header in mobile

Home Forums Support [Resolved] Change look of header in mobile

Home Forums Support Change look of header in mobile

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1597322
    William

    Hi there,

    Is there a way to change the way the header looks for this site to something similar to the below (for mobile)?

    To this:

    Where the image for the logo is also different for mobile?

    #1597637
    Elvin
    Staff
    Customer Support

    Hi,

    Have you tried using a Mobile Header?

    More about mobile header here:
    https://docs.generatepress.com/article/mobile-header/

    Once applied, We can then try to edit/add things with PHP snippets and CSS.

    Let us know.

    A wise man once said:
    "Have you cleared your cache?"

    #1598688
    William

    Yes, I have mobile header enabled, I think I might have CSS preventing it snapping into the position your article states, but unsure what to add or remove to achieve this.

    #1598917
    Elvin
    Staff
    Customer Support

    You can try adding this CSS:

    @media (max-width: 768px){
    .inside-header {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .site-logo {
        max-width: calc(30% - 20px) !important;
        margin-right: 20px;
        margin-bottom: 0px !important;
    }
    
    .header-widget {
        max-width: 70% !important;
    }
    }

    This is how it will look like: https://share.getcloudapp.com/ApuGggAm

    A wise man once said:
    "Have you cleared your cache?"

    #1637340
    William

    Hi there,

    Firstly, apologies for such a late reply to this. I added that code and it made the header look like this, which was great (maybe with a little less padding though):

    Is there a way to have the above look more like this below?:

    Where also the image for the logo is a specific image separate from the desktop version.

    Kind regards,

    Will

    #1637610
    Elvin
    Staff
    Customer Support

    That preferred look can be achieved using this CSS:

    @media(max-width:768px){
    .inside-header.grid-container.grid-parent.lazyloaded {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .inside-header.grid-container.grid-parent.lazyloaded .header-widget {
        width: 100%;
        order: 4;
        margin: 0;
    }
    .inside-header.grid-container.grid-parent.lazyloaded nav#site-navigation {
        width: 70%;
        display: flex;
        align-items: center;
    }
    
    .inside-header.grid-container.grid-parent.lazyloaded nav#site-navigation li a {
        font-size: 3.5vw;
    }
    .inside-header.grid-container.grid-parent.lazyloaded .site-logo {
        width: 30%;
        margin: 0px !important;
    }
    
    .inside-header.grid-container.grid-parent.lazyloaded .site-logo a, .inside-header.grid-container.grid-parent.lazyloaded .site-logo img {
        width: 90% !important;
        height: auto;
    }
    }

    But I’m not sure if this will even apply as you’re site has too many CSS to get keep track for any conflicts.

    As for the logo, We can’t change it unless use/enable Mobile Header. But that will change the layout again and you may end up completely re-writing the CSS for it.

    A wise man once said:
    "Have you cleared your cache?"

    #1658347
    William

    Sorry for the late reply – I think I got to something that works, thanks!

    #1658348
    William

    I made a mobile version of the site here as the text below it was not readable – is there a way for it to link to the homepage?

    #1658351
    Elvin
    Staff
    Customer Support

    I made a mobile version of the site here as the text below it was not readable – is there a way for it to link to the homepage?

    I’m not sure what text you’re pertaining to. If it’s the logo text, we can’t do anything about it with CSS as the text is added as a part of the logo image.

    Also, the logo is already a link that points to the homepage.

    A wise man once said:
    "Have you cleared your cache?"

    #1658352
    William

    For mobile as well?

    #1658364
    Elvin
    Staff
    Customer Support

    For mobile as well?

    To clarify further, you mean the Literature Reviews • Summaries • Analysis within the logo? If so then yes, we can’t do anything about it with CSS as it’s part of the image rather than a text element within the page.

    If I may suggest, consider this:

    Consider cropping out the Literature Reviews • Summaries • Analysis text from the logo and move it to your Site Identity tagline if there’s no strict branding guideline about it.

    This is so we could control its size and spacing on different viewport. 🙂

    A wise man once said:
    "Have you cleared your cache?"

    #1660221
    William

    I think I’m good now! I wouldn’t mind the above but its not a necessity so don’t worry too much about it 🙂 thank you!

    #1661127
    Elvin
    Staff
    Customer Support

    No problem. 😀

    A wise man once said:
    "Have you cleared your cache?"

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