Width menu

As you can see in this screenshot I’ve got the same issue. And many others to boot.

Something essential must have been changed in a recent update, because my website didn’t have this problem before.

It would be great if someone could offer a quick fix.

Thanks

The logo / text in the header should be responsive too.

If you want it to all be on the same line, then the easiest / quickest way of doing it would be to find the breakpoint at which it splits and add a media query in your CSS file which reduces the font size of the title to fit anything below that breakpoint. For example:

@media screen and (max-width: 499px) {
.site-branding .site-title {
    font-size: 1.4em;
    margin: 6px 0 0;
}
}

That makes the text smaller and adds a top margin to balance out the title against the height of the menu button.

Be sure to check on the smaller screen sizes than the breakpoint you’ve set that it all looks ok.

Alternatively you could create a max-width in the same media query, this will keep the title text the same size, potentially splitting the title into two lines, but it’ll still look tidy:

@media screen and (max-width: 499px) {
.site-branding .site-title {
    max-width: 249px;
}
}

They’re not perfect fixes, ideally you’d tweak the HTML too, but the problem may be fixed in a theme update.

Hi Emily and Happy New Year to ya!

Thanks for your suggestion for a quick fix. Unfortunately, it didn’t solve the problem.

I also tried the following:

@media screen and (max-width: 499px) {
header#masthead.site-header div.col-full .site-branding .beta site-title {
	max-width: 25% !important;
}
}

But it didn’t work either. There doesn’t look like there is a quick fix for this one. Both sides of the equation, the Hamburger Menu and the Site Title need their column percentages adjusted.

Unless, someone comes up with an easy and comprehensive tweak, and…

When time permits, (soon), I’ll address this when adding a background logo svg image to the site-branding area.

Thanks Again

@jaapme This may not be perfect but as you can see the Site Title and hamburger Menu are on the same row.

NOTE: I still haven’t figure out how to properly reduce the overall masthead height.

Here is the CSS that I’ve deployed.

/* SMALL SCREEN MAX 385px
---------------- */

@media screen and (max-width: 385px) {

#masthead.site-header {
 padding-bottom: 0;
 margin-bottom: 0;
}

.site-branding {
max-width: 60%;
padding: 0;
}

beta.site-title{
font-size: 1.7em;
padding: 0;
margin: 0;
}

button.menu-toggle, button.menu-toggle:hover {
    margin-top: 1.3em;
}

.woocommerce-breadcrumb {
display: none;
}

h1.entry-title {
font-size: 1.5em;
margin-top: -0.8em;
text-align: left;
}

.site-search .widget_product_search {
display: none;
} /* SCREEN BOTTOM — REMOVES SEARCH AT THE BOTTOM OF THE SCREEN
---------------- */

/* NOT SURE IF YOU NEED TO INCLUDE THE STYLES LISTED BELOW — Storefront Hamburger Menu compatibility */
.storefront-hamburger-menu-active .main-navigation .menu-toggle {
    width: 2.724216em;
    height: 2.724216em;
    border: 0;
    font-style: normal; }
    
.storefront-hamburger-menu-active .main-navigation .menu-toggle:before {
      line-height: 2.724216; }
  
.storefront-hamburger-menu-active .site-header-cart .cart-contents {
    right: 3.618em; } 
}

Hope that helps out!

• This reply was modified 7 years, 11 months ago by Sri Shunyata.