Responsiveness broken

Support
#1

Hello. The responsiveness of my site (tidessamui.com) seems to be a little broken. For screen widths between 980 - 1024 px, the main menu splits into two lines. How can I resolve this?

Thank You,

Carl Gross

#2

Hi Carl,

That happens because on those screensize, the logo and the entire menu doesn’t fit in just one ROW. Possible work around is to reorganize your menu and reduce some links. Other option is to reduce the spaces between those links. Go to Theme Options > Header > Navbar Top Link Spacing (px): Reduce current value to 4px

Hope this helps.

#3

Thanks for the reply. I see that changing navbar top link spacing helps with my issue. But it is aesthetically undesirable. I can work on some CSS changes to alleviate my issue.

One related question is about the layout change that occurs below widths of 980 px. At that width, the menu changes to a hamburger menu (see attached screenshot). How would I change this threshold to be 1130 px instead of 980 px? I think that would resolve my issue–don’t you think?

Thanks.

#4

Hello Carl,

Yes, we can do that too to avoid that issue. Try adding this custom CSS to adjust the mobile menu threshold:

  @media (max-width: 1130px){
    .x-nav-wrap.desktop{
        display:none
    }

    .x-nav-wrap.mobile{
         display:block
     }

    .x-nav-wrap.mobile.collapse{
      display:none
    }

    .x-nav-wrap.mobile.collapse.in{
        display:block
    }

     .masthead-inline .x-btn-navbar {
          display: block;
          float: right;
     }
    .x-btn-navbar:hover {
      color: #003166;
    }
   }

Hope this helps.

#5

Great thanks that works. We can consider this resolved.

#6

Glad we could help.

Cheers!