Space between logo and nav bar

Hi Grace-

The extra space is actually coming from your site’s “Tagline,” or Site Description.

When you have a logo enabled, as you do, the tagline is made invisible, but it’s still there for SEO purposes and for users of accessibility devices like screen readers. Since yours is rather long, it takes up a lot of vertical space on mobile devices (again, even though it’s invisible).

Here’s one way you can fix this. Navigate to Customize > Advanced > Custom JS & CSS and paste this line into your Custom Theme CSS:

@media only screen and (max-width: 767px) {
    h3.site-description.invisible {
    font-size: 0px;
    margin: 0px;
    }
}

Hi Grace-

Glad to hear that the mobile version is looking better!

The reason that your menu wraps into two lines at some screen sizes (between 992 and 1552 pixels in my test) is that in the Linx theme, your logo and menu are both allotted half the width of the screen, even though in your case the logo is pretty small.

To fix that, short of creating a child theme and modifying the header template, we can use a little bit of Custom JavaScript to change those widths. If you, or anyone else finding this topic, would like full control over your header layout without code, I recommend checking out the Crio Supertheme for Buisness.

Navigate to Customize > Advanced > Custom JS & CSS and paste these two lines into your Custom Theme JS:

jQuery('div.header-6.col-md-6').removeClass('col-md-6').addClass('col-md-2');
jQuery('div.header-7.col-md-6').removeClass('col-md-6').addClass('col-md-10');

In my testing, this should provide a one-line menu at any screen size.