Cobalt Theme: Hamburger on iOS13 is wrapping to next line. HELP?

Hi djwaldow,

Thank you for contacting us and we are happy to answer any questions you have about working with your website!

One possible explanation for the design bug in your hamburger menu could be related to using the same color multiple times in your Color Palette settings.  The color used for that icon is dictated by the color selection in the fourth slot of your palette and the header background color is the fifth one, so if they have the same color assignment then that is likely the cause.

The easiest way to change that behavior is to use custom CSS code and this will allow you to use any color value you want for the hamburger icon.  The following CSS snippet sets the default color for the hamburger icon to the same blue used for the button border, but you can change the value to any hexcode you desire.

.palette-primary .navbar-default .navbar-toggle .icon-bar {
    background-color: #85abf6;
}

The header template in the Cobalt theme puts your menu and site branding on separate grid rows at screen sizes smaller than 992 pixels to account for the expansion of the mobile menu when clicked.  If you would like both to appear on the same line for smaller screen sizes then we can use custom CSS again to make that design change.  The following snippet adds a negative margin to the top of your menu area equal to the height of your site branding so that both show on the same row for smaller screens.

@media (max-width: 991px) {
    .header-7 {
        margin-top: -59px;
    }
}

I hope that these snippets help you achieve the design you are looking for and please let us know if there is anything else that we can do to assist you.

I am glad to hear the hamburger menu is working for you!  You can try modifying the max-width property as well to see if that works, but you will also need to rework the code to apply to both header rows to make them the same width.

I revisited the code I gave you previously and added some more specificity which should only affect the header section containing the hamburger menu.

@media (max-width: 991px) {
    .row > .header-7 {
        margin-top: -59px;
    }
}

Hopefully that code gives you the design you need, but please let us know if you have any additional questions.

You’re welcome!  If you ever need anything else in the future please let us know!