Move shrinking logo for mobile view

[gazmtb]

Hi & TIA,
I’m using some code to shrink my logo on scroll into the navbar. However I’d like to align the logo to the left for mobile size. The logo currently over laps the mobile burger menu on small screen sizes.

Glasfryn Escapes | Camping campsite North Pembrokeshire Wales

Global JS:
jQuery( function($) {
var logo = $(“a.x-brand.img”).clone();
$(".x-navbar-inner .x-container").prepend(logo);
});

Global CCS:
}
.x-navbar-inner .x-container.max.width {
width: 100%;
max-width: 100%;
}
.x-navbar-inner a.x-brand.img {
max-width: 120px;
position: absolute;
top: 5px;
opacity: 0;
transition: all 0.5s ease;
}
.x-navbar.x-navbar-fixed-top a.x-brand.img {
opacity: 1
}

[prakash_s]

Hello @gazmtb,

Thanks for writing to us.

To align the logo to the left for the mobile size I would suggest you use this custom CSS code in the Global CSS box

@media(max-width:979px){
.x-navbar-inner a.x-brand.img {
left: 0;
}
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[gazmtb]

Thank you very much!!

[tristup]

Hi @gazmtb,

Glad that we are able to help you.

Thanks