Change look of header in mobile

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.

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.

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

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

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.

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

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

For mobile as well?

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. :)

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!

No problem. :D