Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

getting the header right on mobile

  • hi there,

    you helped me with this site on the old forums. we placed the featured image at the bottom left. it looks great and is working just fine. client (my mom) is pleased.

    now i need help with the header. on desktop and tablet we’ve got it working well enough, but on moblie, i can’t figure out how to get the site title and tagline to drop beneath the logo.

    View post on imgur.com

    thank you!

  • Hi there,

    The first step would be to wrap all your CSS for desktop view in a desktop media query:
    https://docs.generatepress.com/article/responsive-display/

    Let me know when it’s done.

  • all media breakpoints are already at the bottom of my css.

  • Can you disable all the custom CSS for the header on mobile so we can have a clean start to work on the CSS?

    Thanks, let me know!

  • ok, thanks. i think i’ve disabled what you’ve asked. if i missed anything let me know.

  • and honestly, if you have tips for how to only use the swoop in the nav area and show the overflow below it, i can remove the swoop from #masthead. but i couldn’t make it happen with just one image.

  • Could you move ALL this CSS into a new media query of min-width: 768px:

    /* header branding */
    .site-logo {margin-top: -41px; padding: 30px;}
    .site-header .header-image {
      max-width: 25vw; width: auto; min-width: 266px; max-height:323px; margin-top: -20px;
      
    }
    .main-title {margin-bottom: 1.1rem; text-shadow: 0px 2px 1px #000000;  }
    p.site-description, .main-navigation .main-nav  {text-shadow: 0px 2px 1px #000000; }
    .site-branding-container {margin-right: auto; margin-left: 6vw;}

    This should keep your current styles on Desktop and Tablet.

    Then in your mobile media query ( masx-width: 767 ) you can try this CSS:

    #masthead .site-branding-container {
      display: flex;
      flex-direction: column;
    }

    It will set the branding container to a column to stack the logo / title / description.

    Just need to understand its alignment and what to do with its background….

  • thank you, i’ve done this. it’s getting closer and i may be able to wrangle the text from here. do you have advice for just using one of the swoop?

    🙂

  • Ok, so instead of adding a background image to the masthead and the main nav, you could use a CSS pseudo element like so:

    #masthead {
        position: relative;
    }
    #masthead:before {
        content: '';
        position: absolute;
        z-index: -1;
        inset: -23px 0 0 0;
        background-image: url('https://www.passwordspells.com/wp-content/uploads/2023/03/webheader2.png');
        background-repeat: no-repeat;
        background-size: 82% 92%;
        background-position: top right;
        overflow: visible;
    }

    In the inset: -23px 0 0 0; – the -23px refers to the top value which will pull that pseudo element up under the nav.

  • alright! thanks for the explanation! the only thing i’m in a panic about now is downloading all my posts from the old forum so i don’t lose the answers i go back to when i have to do something weird again. lol. the old forums are such a help goldmine. i hope you guys don’t get exhausted answering everything again here when it goes away. be well. thanks for the help on this.

  • The old forum is just archived and the rest be assured that we will never remove it 🙂

  • oh! that’s such a relief. thanks so much. you guys are great.

  • We try our best!

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