Prevent Main Nav from Wrapping (Overlapping Menu)

BB Theme
1

Is there a quick fix to prevent the main navigation menu from overlapping on larger displays? Can I somehow force responsive design display? I have a longer menu and it begins to wrap. Of course on my mobile devices it just shows the responsive menu.

I changed the width of the following CSS class selectors and everything fits, but now the responsive menu on my smart phone is not centered and the website logo is also offset to the left:

.col-md-4 {
width: 20%;
}
.col-md-8 {
width: 80%;
}

How should I approach this? Here is the site: https://www.quickpictours.com

2

I think I found the solution. I just needed to change the width to auto:

.col-md-4 {
width: auto;
}
.col-md-8 {
width: auto;
}

However, I want to make sure my code is clean, can you tell me if there is a cleaner solution?

3

Hey David,

Those classes are actually from Bootstrap and are being used elsewhere. I would suggest adding more specificity to it so it doesn’t get applied wherever it’s used. Using this instead should be fine.

.fl-page-header .col-md-4 {
  width: auto;
}
.fl-page-header .col-md-8 {
  width: auto;
}

Ben

4

Hey Ben,

That worked like a charm. Thanks.

5

Hey David,

No worries! Enjoy The Beaver! :slight_smile:

Ben