[Resolved] Change look of header in mobile

[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?

[Elvin]

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?"

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

[Elvin]

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?"

[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

[Elvin]

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?"

[William]

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

[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?

[Elvin]

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?"

[William]

For mobile as well?

[Elvin]

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?"

[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!

[Elvin]

No problem. 😀

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

[Author]

Posts