Adjust Breakpoint for Hamburger Menu On Tablet or Better Solution

Technical Q&A
,

Topic summary

A user is experiencing a logo overlapping the navigation menu on tablet view and wants to adjust the breakpoint to trigger the hamburger menu earlier (around 1280px). They shared their custom CSS code affecting the header layout.

Initial Solution Proposed:

  • Another user suggested reducing the .full-menu padding-right from 35% to 24% using !important
  • This appeared to resolve the overlap issue initially

New Problem Created:

  • The CSS adjustment introduced unwanted white space appearing between 770px and 1030px viewport widths
  • The original poster provided a screenshot demonstrating this spacing issue

Current Status:

  • The discussion remains open with the user requesting help to fix the newly created white space problem
  • No further solutions have been provided yet
Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi,

My logo overlaps my menu when switching to tablet view. I’d like to adjust the breakpoint so the menu transitions to a hamburger menu earlier.

I believe the issue comes from the following code added to my theme settings under Custom CSS:

.logolink {
  margin: 0;
  padding: 30px;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 5%;
  @media screen and (max-width: 780px) {
    padding-left: 0;
  }
}
.header {
  border: none;
  min-height: 150px;
}
.full-menu {
  border-bottom: solid 1px #cdcdcd;
  position: absolute;
  padding-right: 35%;
  right: 0;
  top: 15%;
}
.mega-menu-container {
  width: 100%;
}

What changes should I make to my code to have the hamburger menu appear sooner? I believe the breakpoint I need is 1280px—does that look good to you? Or maybe the breakpoint isn’t the issue—do you have a better solution to prevent my logo from overlapping the menu?

I’m using the Habitat theme, and my website is Arvika Bike Rack.

Thanks in advance for your help!

2

Hi @Vincent-RVK

You can modify this CSS code:

.full-menu {
    padding-right: 24% !important;
}

Result :

LizHoang_0-1738806039354.png
LizHoang_0-1738806039354.png960×719 545 KB

3

Hi LizHoang,

Thank you for your quick support! I think it worked, but it also created a new issue. See the attached picture—there’s now a white space appearing between 770px and 1030px.

VincentRVK_1-1738851987471.png
VincentRVK_1-1738851987471.png782×838 502 KB

4

Hi @LizHoang ,

If you have time to address the new issue, I would really appreciate it.

Thank you in advance!

Vincent