Docs

[artisinformation]

There is a strange overlap that is happening with my logo /navbar and the first content area that displays on my site when viewing the mobile resolutions. Currently I have a left fixed nav bar. I would also like the logo to be centered. It currently appears on the left side when viewing the mobile site. Any help would be awesome.

http://Stoneworth.com

[artisinformation]

never mind the picture.

[Jade]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[artisinformation]

I provided the link in the original post… and updated the issue I am having.

[Friech]

Hi There,

Sorry about that, I did check the site but I do not see any content overlapping with the logo/navbar, please clarify.

I would also like the logo to be centered. It currently appears on the left side when viewing the mobile site.

You can add this under Custom > CSS in the Customizer.

@media (max-width:  979px) {
	.x-brand.img {
	    margin: 0 auto;
	    float: none;
	}
}

Hope it helps, Cheers!

[artisinformation]

Thanks,

That helped center the image very nicely. It also looks like the mobile button is sitting directly on the content line. How do I add a little bit of padding below the navigation box (mobile view)? Also, is there a way to have this nav box open by default?

I fixed the overlap with a gap above the first item in the first content column. Seems to look ok now, but it’s more of a cosmetic fix than a technical fix. Thanks for your help, it’s much appreciated!

Brandon

[Jade]

Hi Brandon,

Please update the code provided previously to:

@media (max-width:  979px) {
    .x-brand.img {
        margin: 0 auto;
        float: none;
    }

    .x-navbar-wrap .x-container {
        padding: 15px 0;
    }
}

Then add this code in the JS customizer:

(function($){

    $('.x-nav-wrap.mobile').addClass('in');

})(jQuery);

Hope this helps.

[artisinformation]

Hi Again!

Thanks for all your support. It has been fantastic. I am still getting the gap right below the header, but the only time you can see it is when the browser is on my portfolio page when the browser window is small enough to move the menu to a mobile view; (http://stoneworth.com/case-studies/). My fix for the other pages was to put a gap at the top of the first content box, but this is not possible for the portfolio page.

I would also like to have a small gap between the above and below masthead sliders if possible. Any help on this would really be appreciated. Thanks,

Brandon

[Nabeel A]

Hey Brandon,

Please add the following code in your Customizer and remove the gap element from all of your pages. This code will take care of everything:

@media screen and (max-width: 979px) {
header.masthead+div {
    margin-top: 91px !important;
}
}

Let us know how this goes!

[Author]

Posts