CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Bryan Miller
Bryan Miller

Reputation: 3323

Wide menu overflow causing scroll

The menu of the following website https://www.thedegreetracker.com/ has the following issue. The menu seems to be wider than the rest of the page. This is causing a horizontal scroll bar appear at the bottom of my browser's window. When one scrolls over (or maximizes the browser page on a very wide computer screen), it causes other parts of the page, such as the banner and the footer, to disappear when you scroll over.

By way of contrast, the following page does not have the same problem: https://www.thedegreetracker.com/about_us. This second page is how I want the first one to work in terms of the banner and footer resizing correctly, and no horizontal scroll.

As far as I can tell, the HTML and CSS code between the two pages is nearly identical. The differences I have found don't seem to make a difference. I have spent hours trying to figure out what is causing this issue and I am now asking for fresh eyes. I'm using Bootstrap 3 and Laravel, for what it's worth.

I'm hoping this is an easy fix that I'm just missing. You'll probably have more luck using Chrome Dev Tools on the actual web pages to figure this one out, but below is the HTML for both pages. As far as I can tell, the CSS is exactly the same for both pages.

Here's the code from the broken page with the wide menu and horizontal scrolling

view-source:https://www.thedegreetracker.com/login

Here's the code from the page with the menu, banner and footer that work correctly

view-source:https://www.thedegreetracker.com/about_us

Upvotes: 0

Views: 112

Answers (1)

tao
tao

Reputation: 90013

The problem is the within the form, not the menu. You have wrongly used the container class (reserved by Bootstrap for setting width of page) inside your form.

Also, your form has a class of .container but you're overwriting the max-width property. This will likely cause responsiveness problems. Try not to touch width, max-width and min-width on classes that a framework uses for setting the width of content and layout, in general. If you must, use an inner-container.

Getting back to your problem, you should have probably used no class at all for your containers inside the form. As a rule of thumb, try to use class names that do not collide with the class names of your framework.

To fix your issue, either remove container from inside your form or, as a general patch for this type of error, add this CSS:

.container .container {
    width: initial;
}

Upvotes: 2

Related Questions