Header Logo overlap menu

[pixel8edspace]

Hi,

Having issues with my logo overlapping the menu items. Have made the logo 197x42px and entered the size into the width / height boxes.

When the site is viewed at 1185px+ width everything is fine. Anything below that and it overlaps until you get to 970px when it switches to the mobile menu.

This is the same across all browsers. I’ve attached a comparison.

my site is : http://www.aeroportodesign.com

Thx.

[pixel8edspace]

This reply has been marked as private.

[Melanie – SUPPORT]

Hi,

that happens because the width of the menu adds up to the width of the logo which then doesn’t fit anymore to the space available.

Can you tell me which solution you are thinking of so we can take a look at the implementation?
As in: do you want the menu to switch to mobile menu earlier? Or do you want to remove the logo for those screen sizes? Or resize it? Or stack the menu below the logo?

Cheers

[pixel8edspace]

Hi Melanie,

I’d like it to resize retaining it’s position next to the menu.

Thx.

[pixel8edspace]

Looking at it, I guess being too many menu items is causing the problem.

My desired resize option clearly won’t work. I guess stacking the logo above would be the cleanest option.

[Melanie – SUPPORT]

Hey, try this custom css:

@media only screen and
(min-device-width: 992px) and
(max-device-width: 1200px) {    

.header-right {
margin-top: 43px;
}
}

Let me know if that worked!

[Kyle – SUPPORT]

Hi

Would you like it to switch to the mobile navigation when it starts to overlap?

– Kyle

[Kyle – SUPPORT]

If so add this to your custom css:

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

.header-6 #logo, .header-7 #logo {
        width: 100%;
        padding: 0 15px;
        left: 0;
        height: auto;
        position: relative;
    }
#main-navigation {
        display: none;
    }
nav.search-nav {
                display: none;
        }
.visible-sm.visible-xs.mobile-menu-show {
                display: block!important;
        }
#logo a {
               float: left;
        }
}

– Kyle

[pixel8edspace]

Hi Kyle,

I would like to shift the logo up above the menu when the width is reduced.

I don’t want to change the default mobile settings..

Thx.

[Kyle – SUPPORT]

Ok try this:

@media only screen and (max-width: 1200px) {
#header-section {
  height: 115px;
}
.header-6 #logo, .header-7 #logo {
  position: relative;
  width: 100%;
}
}

– Kyle

[Melanie – SUPPORT]

Hi pixel, did you try the css I gave you? It does what you asked for 🙂

[Melanie – SUPPORT]

Kyle… I already gave him the css to make this work – please look above 🙂

[Kyle – SUPPORT]

Hi Melanie,

The css you provided is not ideal, it does not increase the header height (see screenshot)

– Kyle

[pixel8edspace]

Hi Both,

Not sure if my last post went through.

Anyway, none of the css is working properly. Still overlapping and/or shifting the lower line.

I’ve attached an example of what I hope it can be (when between full size and mobile size)

Thx

[Kyle – SUPPORT]

Hi

What do you get with the css that I gave you?

– Kyle