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.

Header at various breakpoints

  • Hi there,
    This ticket follows on from another ticket which has been marked as resolved.

    https://generate.support/topic/header-with-centered-logo-and-menu-items-either-side/page/2/#post-159707

    With help provided in the ticket above I was able to complete the desktop layout for the header. The mobile header (below 768px) is also working correctly. However the responsive layout between 768px and 1320px needed some work.

    I’ve resolved all issues via Custom CSS except one. If you refer to the screencast in private info below, you’ll see that I have a header CTA (phone and Get a Quote button) which have been added to the header as an element called “Header CTA”. In desktop the Header CTA is aligned to the right edge but when I drop below 1320px (this is a custom breakpoint) the element is then in the left of the header before it disappears below 768px as expected.

    I’m trying to figure out how to ensure that header CTA stays to the right edge of the header. I’m guessing it has something to do with the alignment settings but I can’t seem to have any impact with settings I am choosing.

    Hoping for your guidance to resolve the alignment.

    Thanks!

  • Hi there,

    Try adding this CSS:

    @media (max-width: 1320px) {
        #mobile-header .menu-toggle {
            order: -1;
        }
    }

    That should keep the header CTA aligned to the right edge at that breakpoint.

  • Awesome, that works perfectly! Thanks very much.

  • You’re welcome!

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