[Resolved] Mobile header issue

[Leo]

Hello,

You have given me lots of good advice recently, which I greatly appreciate!

Today, I have another small issue and wonder if you could help me: I would like to have the name of my blog (Myberlin) in white letters and left aligned above the logo in as big a font size as possible. This should be just for the mobile version, where the name of the blog is currently not to be seen. Computer and tablet view are just fine.

I have tried with the hook “generate_inside_mobile_header”, but this has proved unsuccesful. All I managed was to get the name “Myberlin” left of the logo in small black typeface, which is not what I wanted.

Would you kindly give me some advice, please?

Website is: https://www.myberlin.nl

Many thanks!

Regards

Leo

[David]

Hi there,

you could add it as a widget to the Top Bar – would that work?
If so add a new text widget and do something like this:

<div class="mobile-site-title hide-on-tablet hide-on-desktop">Your site title</div>

Move this widget to the top so its the first widget.

It may take a little CSS. Which i can help with. Let me know.

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

[Leo]

Dear David,

Using a widget for the top bar looks quite good already, thank you! However, I would like to have the name of the website (“Myberlin”) left aligned and with a font which is approx. twice the size of the (right aligned) copyright notice (so that it would have approx. the height of two lines of text). So, ideally, the copyright notice remains right aligned, on the first line of the top bar, with a typeface half the size of the left aligned name of the website. If you would care to have a look at http://www.myberlin.nl you’ll see what I mean.

But maybe I am asking a lot now…?

Many thanks,

Regards,

Leo

[Ying]

Hi Leo,

Try this:

@media (max-width: 768px) {
aside#custom_html-6 .textwidget {
    display: flex;
    justify-content: space-between;
}

aside#custom_html-6 {
    width: 100%;
}

.mobile-site-title {
    font-size: 2em;
}
}

[Leo]

Dear Ying,

Thanks a lot! I am not sure, though, where to put this: when I put it in the Text Widget (replacing David’s text) it just shows the code. Do I need to create a snippet for this (with the help of the Code Snipped plugin you recommended)?

Thank you again.

Regards

Leo

[Ying]

You can add CSS code to customizer > additional CSS 🙂

[Leo]

it is almost perfect, thank you! The only thing is that the name of the website is now indeed on top (which is fine), but right aligned instead of left aligned. On the other side, the copyright notice has now changed from right aligned (which I would like) to left aligned and is now a line underneath the name of the website.

Could the title please move to the left (keeping the larger font size) and the copyright (of which the typeface should remain half the size, as it is now) to the right, but still on the first line.

I hope this does not sound too complicated, thank you again for your help!

[Ying]

The HTML structure changed, it’s not the same as when I wrote the CSS.

I’ll have to re-write the CSS, so remove the one I provided previously, add this one:

@media (max-width: 768px)
.inside-top-bar.grid-container.grid-parent {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mobile-site-title {
    font-size: 2em;
}
.inside-top-bar.grid-container.grid-parent:before, .inside-top-bar.grid-container.grid-parent:after {
    content: none;
}
}

[Leo]

Dear Ying,

Sorry to be such a nuisance! It is almost right now: the only thing is that the title is now centered instead of left aligned. But the typeface has got the right size. Furthermore, the copyright notice is right aligned, as it should be. So if just the title could move from centered to left I would indeed be extremely pleased!

Thank you,

Regards,

Leo

[David]

Can you:

1. DELETE all this CSS:

.top-bar-align-right {
    text-align: right !important;
}

@media (max-width: 768px) {
    .site-info .copyright-bar {
        text-align: right !important;
    }
}

.copyright-bar {
    text-align: right;
}

@media (max-width: 768px) .inside-top-bar.grid-container.grid-parent {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-site-title {
    font-size: 2em;
}

.inside-top-bar.grid-container.grid-parent:before,
.inside-top-bar.grid-container.grid-parent:after {
    content: none;
}
}

2. Add this CSS:

.inside-top-bar {
    display: flex;
    align-items: center;
}
.top-bar .inside-top-bar .widget:last-child {
    margin-left: auto !important;
}
.mobile-site-title {
    font-size: 2em;
}

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

[Leo]

Hi David,

Fantastic! Thank you so much!

Regards,

Leo

[David]

Glad we could be of help

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

[Leo]

Dear David,
At the risk of being a nuisance: for the mobile version there would still be enough room to add the tagline direclty underneath the title of the website (as is already the case for computer and tablet). If the font is just standard size it would fit easily.

Could you please advice me how this can be achieved, as it really would look better? Unfortunately, for historical reasons the name of my website is in English but it addresses itself to a Dutch audience, so the Dutch tagline would definitely help.

Thank you so much.

Leo

[David]

OK, so in your widget where you have this HTML:

<div class="mobile-site-title hide-on-tablet hide-on-desktop">Your site title</div>

We can change that to this to include a tag line, so it looks like:

<div class="mobile-site-title hide-on-tablet hide-on-desktop">Your site title</div>
<div class="mobile-site-tagline hide-on-tablet hide-on-desktop">Your tag title</div>

You can then set the style of your tagline like so:

.mobile-site-tagline {
    font-size: 12px;
}

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

[Leo]

Hi David,

Thank you so much, that worked splendidly!

Regards,

Leo

[Author]

Posts