Bootstrap Framework 3 causing horizontal scroll due to header styling

Here is the link you requested:

This is the HTML Code:

<header id="header-10">
    </div><!-- /.header-10-top -->
    <!-- MAIN NAVIGATION -->
    <div class="header-10-main">
        <div class="container">
            <div class="row">
                <div class="header-10-logo col-lg-3 col-md-3 col-sm-3">
                    <a href="#"><img src="img/logo.png" alt="Home 10 Main Logo"></a>
                </div><!-- /.header-10-logo -->
                <div class="header-10-nav col-lg-9 col-md-9 col-sm-9">
                    <nav class="navbar navbar-10 navigation-10" role="navigation">
                        <ul onClick="" class="zetta-menu zm-response-switch zm-effect-slide-top">
                            <li class="zm-active zm-content-full first">
                                <a href="#">
                                    Home
                                </a>
                            </li>
                            <li class="zm-content-full">
                                <a href="#">
                                    Sliders
                                </a>
                            </li>
                            <li class="zm-content-full">
                                <a href="#">
                                    Pages
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    Portfolio
                                </a>
                            </li>
                            <li class="zm-content-full">
                                <a href="#">
                                    Elements
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    Blog
                                </a>
                            </li>
                            <li class="last">
                                <a href="#">
                                    Contact
                                </a>
                            </li>
                        </ul><!-- /.zetta-menu -->  
                    </nav><!-- /.navbar-10 -->
                </div><!-- /.header-10-nav -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </div><!-- /.header-10-main -->
</header><!-- /#header-10 -->

If either 'header-10-main' or 'header-10-nav' are removed, it resolves the issue.

When the resolution is below 1370px, there is a horizontal scrollbar present. I have inspected all elements but none of them exceed the body. Applying 'overflow:hidden' does fix the issue, but then the dropdowns do not work.

Any assistance on this matter would be greatly appreciated.

Answer №1

Adjust the width of the element below.

.zetta-menu .w-150 { 
   width: 140px; // Currently set at 150px; 
}

It would be preferable if you could shift the second level dropdown of the blog menu [ Blog -> Blog List ] to the left side. Currently, it opens on the right side causing issues.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I make a div extend beyond the boundaries of a bootstrap card?

Working with bootstrap version 4 and devexpress. The dropdown section you see is a creation by devexpress. https://i.sstatic.net/8vdj6.png ...

Generating PDF files from HTML documents using Angular

I am currently working on an Angular 11 application and I have a specific requirement to download a PDF file from a given HTML content. The challenge is that the HTML content exists independent of my Angular app and looks something like this: < ...

How ASP.net can dynamically generate URLs in external CSS files

I have been trying to organize my css separately from the *.aspx file. Everything was working fine when the following code was included in the aspx file: background-image: url('<%=Page.ResolveUrl("~/Themes/Red/Images/Contestant/1.jpg)%>';) ...

Internet Explorer's support for the `<summary>` tag in HTML

Is there a method to enable the summary tag in Internet Explorer 11, such as using an external library? <details> <summary>Here is the summary.</summary> <p>Lorem ipsum dolor sit amet</p> </details> App ...

Can you explain the meaning and purpose of <meta charset="UTF-8"> tag in

Meta charset="UTF-8" serves as a condensed symbol system for representing information in a more concise and practical manner: The coded message was carefully crafted. ...

Using Laravel to connect custom fonts

After previously discussing and experimenting with linking custom font files in Laravel, I encountered an issue where the fonts were not displaying correctly on my website. Due to Laravel's router, directly linking to font files in CSS was posing a ch ...

Enhance your Material UI Button with Advanced Text Alignment Options for Compact Screens

As a beginner in React and Material-UI, I'm attempting to customize a set of buttons within my app bar with background images for a cleaner look. Drawing inspiration from various online examples, I've managed to style them to my liking on larger ...

Extending an element beyond the boundaries of its container

I currently have 3 different divisions within the body of my document: a container, a parent, and a child element. My goal is to make the child element extend beyond its parent on the left side. However, when I try to achieve this by using position: ab ...

When incorporating script tags in React, an "Unexpected token" error may arise

I am in the process of converting my website to a React site, but I am encountering an issue with the script tags not working. It keeps showing an unexpected token error. Here is the code snippet: <div className="people"> How many people are you ...

AngularJS: Error encountered when trying to assign a value to a read-only property in the ng-submit directive

I've been working on a personal project to practice angularJS, but I've encountered a problem that seems unsolvable to me. The issue arises when I try to utilize the submitLogin() function in my LoginCtrl.js file upon form submission. An error m ...

Animate photos with identical class names individually using CSS

Check out this snippet: <img class='img-logo' src={logo} alt="Logo" /> <img class='img-logo' src={logo} alt="Logo" /> <img class='img-logo' src={logo} alt="Logo" /> <img class ...

Controlling icons and images in Django

I have a question regarding the best practice for managing media on my Django site. Unlike most questions that involve confusion with code snippets, this one concerns the dilemma faced by some web developers. Instead of storing all media content in a mod ...

Executing npm run build index.html results in a blank page being generated without any error messages or warnings

After building my react app with npm run build, I encountered a problem where clicking on index.html resulted in a blank page opening in the web browser. I explored several solutions to address this issue but none seemed to work. Some of the strategies I ...

The jQuery function is not functioning correctly

Currently, I am in the process of setting up an accordion menu using jQuery and CSS3. Everything is working perfectly fine so far except that the menu always opens upon page load and the code to hide it is not functioning as intended. Here's the link ...

Is there a way to use jQuery to eliminate divs that contain multiple identical data values?

Is there a way to accomplish this? <div class="chat_timestamp_group" data-date="08-March-2016"></div> <div class="chat_timestamp_group" data-date="08-March-2016"></div> <div class="chat_timestamp_group" data-date="14-March-2016" ...

Retrieve custom attributes of child elements using jQuery selectors

I am looking to modify the data-answersetid attribute of all child controls under the .cloneable class in a table. Each row in the table contains a single control - either a textarea, checkbox, radio button, or input[type=number]. Each control has a custom ...

Can you please tell me the font size specified as 20px/26px?

Recently stumbled upon the 20px/26px value in a codebase I'm currently working on. Wondering if anyone has encountered this before and knows what its purpose is. Interestingly, it renders with the latter pixel value (26px) in Chrome. #action { font: ...

Expanding the width of an image beyond its parent <div> without compromising on vertical space

Is it possible to have a child <img> wider than its parent div, while maintaining proportional width and preserving vertical space? Using position:absolute; might move the image out of the normal document flow, but I want to keep the vertical space ...

Creating a CSS background that adjusts to fit any screen resolution

Hey there, I'm a beginner to all of this. I want my background image to adjust to fit any web browser resolution, regardless of the size. So far, I've come across this nifty little trick: html { background: url(images/bg.jpg) no-repeat center ...

Accessing a template object in JavaScript using querySelector

Essentially, I am trying to querySelect a <template> from JavaScript but constantly receiving null as the result. JavaScript code: class MyImportWebcomponent extends HTMLElement { constructor() { super(); } connectedCallback() { ...