Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Dante › Header Logo overlap menu
New Landing › How can we help? › Themeforest Theme Support › Dante › Header Logo overlap menu
- This topic has 22 replies, 3 voices, and was last updated 10 years by Kyle – SUPPORT.
-
Posted in: Dante
-
February 28, 2014 at 7:24 am #52744
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.
February 28, 2014 at 7:24 am #52746This reply has been marked as private.February 28, 2014 at 9:44 am #52792Hi,
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
February 28, 2014 at 9:56 am #52810Hi Melanie,
I’d like it to resize retaining it’s position next to the menu.
Thx.
February 28, 2014 at 10:05 am #52818Looking 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.
February 28, 2014 at 12:16 pm #52889Hey, 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!
February 28, 2014 at 1:16 pm #52908Hi
Would you like it to switch to the mobile navigation when it starts to overlap?
– Kyle
February 28, 2014 at 1:17 pm #52909If 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
March 1, 2014 at 1:40 pm #53133Hi 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.
March 3, 2014 at 9:42 am #53368Ok try this:
@media only screen and (max-width: 1200px) { #header-section { height: 115px; } .header-6 #logo, .header-7 #logo { position: relative; width: 100%; } }
– Kyle
March 3, 2014 at 10:06 am #53386Hi pixel, did you try the css I gave you? It does what you asked for 🙂
March 3, 2014 at 10:07 am #53387Kyle… I already gave him the css to make this work – please look above 🙂
March 3, 2014 at 10:27 am #53405Hi Melanie,
The css you provided is not ideal, it does not increase the header height (see screenshot)
– Kyle
March 3, 2014 at 10:38 am #53415Hi 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
March 3, 2014 at 10:44 am #53421Hi
What do you get with the css that I gave you?
– Kyle
-
Posted in: Dante
You must be logged in and have valid license to reply to this topic.