How to make a header that stays side-by-side and doesn’t stack on mobile?

  • I’m using the Post and Page builder to edit a header that is assigned to everything. This header has 3 side by side elements: Logo, Menu, Order button. When I shrink the screen to mobile, the menu correctly turns into a hamburger but all three elements stack on top of each other rather than stay side by side despite there being plenty of room for them all. How can I resolve this? I know how to get rid of one of the elements (the order button) on mobile but it appears that the logo is taking up FAR too much space. The amount of space assigned to the logo column is about 2x the size of the logo and this is likely pushing the other elements down. I can’t figure out how to shrink this column. The width tab isn’t editable on the column Advanced Control. It looks like this:

    View post on imgur.com

    • This topic was modified 3 years, 4 months ago by oddible.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi Oddie,

    Sorry you’re having trouble with your mobile header layout. I think what you should do in this case is create a custom page header using Crio’s Page Header builder then use a plugin like ShiftNav Responsive Mobile Menu to style your header and set the structure.

    You can use this video to help you get familiar with creating custom page headers for mobile devices in Crio:

    [embed]https://youtu.be/2wBzC9BVZos[/embed]

    I hope this helps.

    Thread Starter oddible

    (@oddible)

    Thanks, yeah I’ve seen that video – the problem is that video doesn’t do what I’m trying to do. In that video he stacks everything. I want things to remain side-by-side. I want my Logo and my Hamburger Menu to be on the same line. This seems impossible with Bold Grid and Crio since there is some strange extra padding added to the logo that won’t allow them to occupy the same row.

    Hi @oddible,

    Styling custom Page Headers with the Post and Page Builder is a Premium feature of Crio, which unfortunately means that we are unable to provide direct support for it through the WordPress forums according to the Forum Guidelines.

    However, you can submit a Premium Support ticket through your BoldGrid Central account to get in touch with our team directly so we can help you get your header designed as needed.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to make a header that stays side-by-side and doesn’t stack on mobile?’ is closed to new replies.