[Resolved] Mobile header issue

Home Forums Support [Resolved] Mobile header issue

Home Forums Support Mobile header issue

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #2310605
    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

    #2310806
    David
    Staff
    Customer Support

    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.

    #2311284
    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

    #2311316
    Ying
    Staff
    Customer Support

    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;
    }
    }
    #2311343
    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

    #2311362
    Ying
    Staff
    Customer Support

    You can add CSS code to customizer > additional CSS 🙂

    #2311387
    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!

    #2311414
    Ying
    Staff
    Customer Support

    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;
    }
    }
    #2311428
    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

    #2311899
    David
    Staff
    Customer Support

    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;
    }
    #2311940
    Leo

    Hi David,

    Fantastic! Thank you so much!

    Regards,

    Leo

    #2311974
    David
    Staff
    Customer Support

    Glad we could be of help

    #2312011
    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

    #2312359
    David
    Staff
    Customer Support

    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;
    }
    #2314061
    Leo

    Hi David,

    Thank you so much, that worked splendidly!

    Regards,

    Leo

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