Inline navigation menu not looking good on devices 1024px wide

Support
#1

Hello. I’m testing responsive design for dev1.thumbprintbooks.ca. The width for links in the inline navigation menu on devices that are 1024px wide is too narrow—truncates Portfolio and Testimonials, and forces Family Stories and Corporate Stories to be center aligned with extra space to the left and right. Is there a way to correct this?

#2

Hello There,

Thanks for writing in! You are experiencing the issue since there is no longer enough space to display the menu items and your text logo. To resolve this, please use this custom css in the custom css section in the header builder:

@media(min-width: 980px)and (max-width: 1140px){
  .hm4.x-text,
  .hm6.x-menu > li > .x-anchor .x-anchor-text-primary {
    font-size: 0.75em;
  }    
}

And you shall have this:

#3

Thanks. That worked. You support people are GREAT!

#4

Hey There,

You’re welcome! We are just glad we were able to help you out.

Cheers.

#5

I’m having a similarly issue: michellebutler.ca - menu items display below logo when changing the size of the window. I’d love for it to display regular and once it becomes too small to display all menu items, go to mobile type view.

#6

Hi there,

You are using the X theme which does not have the Header Builder and although the problem seems to be the same the code behind to 2 versions are completely different.

Kindly open up a separate thread and we will be more than happy to help you around.

Please kindly add the CSS code below to X > Launch > Options > CSS:

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
	padding-left: 5px !important;
	padding-right: 5px !important;
}
@media (max-width: 1199px) {
	.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
		padding-left: 5px !important;
		padding-right: 5px !important;
		font-size: 13px
	}
}

Play with the padding of 5px to fine tune the way you like. The first padding is for the resolutions higher than 1199px and the second series of the padding are for the smaller ones.

Open up a new thread to follow up. Thank you.

#7

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