Logo image not responsive

[empirenannies]

For the design of the website, we wanted to make the logo image overhang out of the header container…

To achieve this we used;

.x-navbar .x-brand {
position: absolute;
top: 0;
left: 0;
z-index: 1100;
}

In the customise>header settings logo width is set to 650px

The problem is now, when you resize a browser windows by dragging from the corner as you get smaller, the logo image does not shrink, stays the same size and causes a clash with the menu links next to it…

I then added media queries for each size like below;

@media (max-width: 480px) {
.x-brand img {
width: 160px!important;}

.x-navbar .desktop .x-nav > li > a {
font-size: 17px!important;}

.mtsnb-button-type.mtsnb-content {
font-size: 11px!important;}

.mtsnb .mtsnb-button {
font-size: 8px!important;}
}

@media (min-width: 481px) and (max-width: 767px) {
.x-brand img {
width: 180px!important;}

.x-navbar .desktop .x-nav > li > a {
font-size: 14px!important;}

.x-navbar-inner {
height: 85px!important;
}
}

@media (min-width: 768px) and (max-width: 979px) {
.x-brand img {
width: 200px!important;}

.x-navbar .desktop .x-nav > li > a {
font-size: 15px!important;}

.x-navbar-inner {
min-height: 80px;}
}

@media (min-width: 980px) and (max-width: 1199px) {
.x-brand img {
width: 220px!important;}

.x-navbar .desktop .x-nav > li > a {
font-size: 13px!important;}
}

This still does not help, when resizing browser window, the logo still stays large until the media query breakpoints are reached…

I know with the x heme usually when resizing browser windows the logo is responsive and shrinks in correlation. I assume it is because we used the position:absolute attribute in css and took it out of its container which makes it shrink?

Thanks in advance for your help, website in question is elavon.thedigitalpine.co.uk

[basanta]

Hi There,

Thanks for writing in!

I can see the logo image shrinks according to your media query break point.
If you want to shrink the logo according to the browser resize please remove the media query and CSS you have written and use this CSS.

.x-navbar .x-brand {
position: absolute;
top: 0;
left: 0;
width: 15%;
z-index: 1100;
}
.x-brand img {
 width: 100%;
}

@media (max-width: 480px) {
.x-navbar .x-brand {
width: 160px !important;
}
}

Hope this helps!