[Resolved] Title misaligned in mobile view

[Kritish]

Hi,

I have tried a few CSS from other topics and am unable to fix the title being misaligned on mobile view. I just needed the logo/title to be on top with the menu underneath, I tried with both mobile header enabled and disabled.

[Leo]

Hi there,

Are you currently removing the site header using the Layout Elements?

If so can you try using this CSS instead so the normal header shows on mobile

@media (min-width: 769px) {
    .site-header {
        display: none;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know when this is done 🙂

[Kritish]

Hi Leo,

Yes I am using elements to remove the header and have moved the title into the navigation following instructions from the documentation page.

The code you gave did nothing.

[Leo]

Can you first disable that element which is removing the header?

Then the CSS should hide the normal header on desktop only and shows on mobile.

The normal header is closer to what you have in mind.

Let me know if this makes sense 🙂

[Kritish]

Hi Leo,

I have done as you have said and disabled the element(which looks like it was doing nothing anyways) and added your CSS but the title still doesn’t look good in mobile view.

[David]

Hi there,

try this:

@media (max-width: 400px) {
    .main-navigation .site-branding a {
        font-size: 16px;
    }
}

[Kritish]

Hi David,

Thanks for your help, I am bad with CSS and using what you gave I made some adjustments to make the mobile view slightly better.

[David]

Glad to be of help 🙂

[Kritish]

Hi David,

I know I already marked this as resolved, but I wasn’t sure if I should open another topic since it will be continuing on from what I did here. My boss wasn’t too happy as to how the title came out in mobile view on the iPhone X and has asked if the title can be changed on just mobile view.

I tried the following CSS and wasn’t sure why it changed the layout completely and made it non-responsive(I think?).

@media (max-width: 400px) {
    .main-navigation .site-branding a  {
	visibility:hidden;
    }
}
@media (max-width: 400px) {
    .main-navigation .site-branding a:after  {
	visibility:visible;
	content:"OLMC";
    }
}

[David]

Hi there,

have you considered creating a mobile logo? You can then use the mobile header which has its own logo option.

[Kritish]

Hi David,

I had tried mobile header, but doing so didn’t display the title/crest as it is viewed on desktop view, which is why I was trying to change the text of the title when viewing in mobile view to the shortened form of just OLMC.

So my end goal was ‘Crest OLMC hamburger menu’ all in 1 line.

[Leo]

So where would the toggle be?

On the right of the title text?

[Kritish]

Hi Leo,

That is correct if you mean the menu toggle.

[Leo]

With the logo I assume? Might be quite tight for space.

Can you disable the mobile header again?

[Kritish]

Yes that is correct, that is why I wanted to change the full title to just “OLMC” using the CSS from my previous post.

[Author]

Posts