Navbar Overlapping Logo in Header

Support
#1

Hi there,

Having some trouble with an overlapping header on certain screen sizes.

https://www.litculture.com/

I’ve also attached a screenshot of what the issue looks like. What’s the best way for me to edit the header so the two elements don’t overlap when changing the screen size?

Thanks,

-Andrew

#2

Hello Andrew,

Thanks for asking. :slight_smile:

Under Header builder > Bar > Flex Layout select Wrap Children.

Thanks.

#3

Hi Prasant,

I switched the settings as you recommended and unfortunately running into the same issue with the ribbon overlapping the logo.

The ribbon is styled with custom CSS, not built in Pro Header Builder. Is there another solution I can try?

-Andrew

#4

Hi Andrew,

Your x bar container which is residing your menu, has the following margin settings.

margin: 0px -50px 0px -50px;

So from the left margin -50, it goes beyond the logo. Could you please try editing the values and see if that helps.

Thanks!

#5

Worked great, thanks a lot

One more question. Is there a way to set a break point so the the logo doesn’t jump above the ribbon before the header changes to the mobile header when resizing screens?

Thank you!

#6

Also when i made the changes earlier, the bar moved to the left. I would like it to stretch all the way to the right edge of the screen.

#7

Hi again,

Try giving your bar a class e.g custom-bar and then add the following code in the Theme Options > CSS:

.custom-bar {
  max-width: 955px !important;
}

@media screen and (max-width: 1100px) {
  .custom-bar {
      max-width: 830px !important;
   }
   .custom-bar li > .x-anchor .x-anchor-content {
       padding: 0 4px !important;
   }
}

Let us know how this goes!

#8

Hi there, I added the custom class and CSS as instructed but it just moved the ribbon to the left. I need it to stay all the way to the right touching the far right of the screen.

#9

Hi There,

Sorry, but there is no way around this because of the length of your inline-navigation, we need to hide the inline-navigation container and show the mobile menu container sooner.

First, please remove all the Hide During Breakpoints option you applied on the Containers. Then add this to Theme Options > CSS

/*hide in 1321px and above*/
@media (min-width: 1321px) {
	.hide-above-1321px {
		display: none !important;
	}
}

/*hide in 1320px and below*/
@media (max-width: 1320px) {
	.hide-below-1320px {
		display: none !important;
	}
}

Apply the CLASS hide-above-1321px on mobile menu and CLASS hide-below-1320px on inline-navigation.

Thanks,

#10

Looks like this did the trick. Thank you for the help!

#11

Glad we could help.

Cheers!

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.