Logo Overlapping Menu - Support | Kriesi.at

Tagged: header, logo, overlap

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
October 19, 2014 at 7:45 pm #338000

absmith55
Participant

Hi guys. I’ve been following along on a few threads regarding logo/menu trouble and have made a few fixes along the way. I’m left with a two remaining issues that I’m hoping you can help with.

1. The mobile menu seems to kick in when the window is 988 pixels wide. Does that sound right? When the window is slightly larger – from 989 pixels to 1080 pixels, the logo and menu overlap. Would it be possible to have the mobile menu “turn on” when the window is anything less than 1080 pixels wide?

2. Once the window shrinks down to mobile size, the logo and mobile menu begin overlapping. I’d be okay shrinking the logo down a bit, but when I try, the logo placement ends up out of place (e.g. it’s not nicely left aligned and vertically centered). I’d also be open to swapping in a different version of the logo that is more narrow if you could tell me how to do that.

Thanks!
Alexa

October 20, 2014 at 6:53 pm #338545
Yigit
Keymaster
Hey Alexa!

Please add following code to Quick CSS in Enfold theme options under General Styling tab
```
@media only screen and (max-width: 1140px) {
.av-main-nav > li > a { padding: 0 6px; }}
```
Seems like you solved the second issue already using custom CSS code?

Cheers!
Yigit
October 25, 2014 at 2:11 pm #340952

absmith55
Participant

Hi Yigit.

The menu is still overlapping the logo when the window is 989 pixels to 1028 pixels wide.

And the second issue hasn’t been solved. The mobile menu still overlaps the logo:

Once the window shrinks down to mobile size, the logo and mobile menu begin overlapping. I’d be okay shrinking the logo down a bit, but when I try, the logo placement ends up out of place (e.g. it’s not nicely left aligned and vertically centered). I’d also be open to swapping in a different version of the logo that is more narrow if you could tell me how to do that.

October 27, 2014 at 9:37 am #341385
Ismael
Moderator
Hi!

You can also adjust the font size:
```
@media only screen and (max-width: 1028px) {
#top #header .av-main-nav > li > a {
font-size: 13px;
}
}
```
Cheers!
Ismael
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.