What causes the content of a sticky navbar to overflow?

I have a situation where my navbar has two styles (.navbar and .navbar_fixed), but the links in the navbar are not fitting properly. I attempted to remove padding and add left: 0;, however, these adjustments did not work as expected. Any suggestions on how to resolve this issue? 

$(document).ready(function() {
  
    $(window).scroll(function () {
        if ($(window).scrollTop() > 280) {
            $('.navbar').addClass('navbar_fixed');
            $('.navbar_fixed').removeClass('navbar');
        }

        if ($(window).scrollTop() < 281) {
            $('.navbar_fixed').addClass('navbar');
            $('.navbar').removeClass('navbar_fixed');
        }
    });
});
* {
margin: 0;
padding: 0;
}

body {
font-family: 'Montserrat', sans-serif;
}

.global-padding {
padding-right: 98px;
padding-left: 98px;
}

.clearfix:after {
display: table;
clear: both;

content: '';
}

.container {
width: 100%;
max-width: 1366px;
}

.navbar {
padding-top: 63px;
}

.navbar_fixed {
position: fixed;
z-index: 100;
top: 0;
left: 0;

width: 100%;
height: 32px;
padding: 23px 98px 0 98px;

background-color: #ffffff;
box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.25);
}

.navbar__menu {
float: right;

list-style: none;
}

.navbar__link-item {
float: left;
}

.navbar__link {
font-size: 14px;
font-weight: 300;

padding: 10px 13px;

text-decoration: none;
text-transform: uppercase;

color: #8c8c8c;
}

.navbar__link:hover {
color: #212121;
}

.navbar__link_active {
font-weight: 700;

letter-spacing: 1.4px;

color: #212121;
border-bottom: 3px solid #212121;
}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;700&display=swap" rel="stylesheet">
</head>
<body>
    <nav class="global-padding navbar clearfix">
        <a href="#" class="navbar__logo"><img src="img/logo.svg" alt="Interior Logo"></a>
        <ul class="clearfix navbar__menu">
            <li class="navbar__link-item"><a href="#" class="navbar__link navbar__link_active">HOME</a></li>
            <li class="navbar__link-item"><a href="#" class="navbar__link">PRODUCTS</a></li>
            <li class="navbar__link-item"><a href="#" class="navbar__link">HISTORY</a></li>
            <li class="navbar__link-item"><a href="#" class="navbar__link">SHOWROOM</a></li>
            <li class="navbar__link-item"><a href="#" class="navbar__link">CONTACT</a></li>
            <li class="navbar__link-item"><a href="#" class="navbar__search"><img src="{% static "img/search.svg" %}" alt="" class="navbar__search"></a></li>
        </ul>
    </nav>
    <div class="container">
        <p class="global-padding" style="margin-top: 20px;">
            [Unique Content Goes Here]
        </p>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>

htmljquerycss

Answer №1

I made changes by adding the class .navbar__menu_fixed with a padding-right of 196px (double the default padding) and also updated my script.

$(document).ready(function() {
  
    $(window).scroll(function () {

        if ($(window).scrollTop() > 280) {
            $('.navbar').addClass('navbar_fixed');
            $('.navbar_fixed').removeClass('navbar');
            $('.navbar__menu').addClass('navbar__menu_fixed');
            $('.navbar__menu_fixed').removeClass('navbar__menu');
        }

        if ($(window).scrollTop() < 281) {
            $('.navbar_fixed').addClass('navbar');
            $('.navbar').removeClass('navbar_fixed');
            $('.navbar__menu_fixed').addClass('navbar__menu');
            $('.navbar__menu').removeClass('navbar__menu_fixed');
        }
    });
});
* {
margin: 0;
padding: 0;
}

body {
font-family: 'Montserrat', sans-serif;
}

.global-padding {
padding-right: 98px;
padding-left: 98px;
}

.clearfix:after {
display: table;
clear: both;

content: '';
}

.container {
width: 100%;
max-width: 1366px;
}

.navbar {
padding-top: 63px;
padding-right: 98px;
padding-left: 98px;
}

.navbar_fixed {
position: fixed;
z-index: 100;
top: 0;
left: 0;

width: 100%;
height: 32px;
padding-top: 23px;
padding-left: 98px;
padding-right: 98px;

background-color: #ffffff;
box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.25);
}

.navbar__menu {
float: right;

list-style: none;
}

.navbar__menu_fixed {
float: right;

padding-right: 196px;

list-style: none;
}

.navbar__link-item {
float: left;
}

.navbar__link {
font-size: 14px;
font-weight: 300;

padding: 10px 13px;

text-decoration: none;
text-transform: uppercase;

color: #8c8c8c;
}

.navbar__link:hover {
color: #212121;
}

.navbar__link_active {
font-weight: 700;

letter-spacing: 1.4px;

color: #212121;
border-bottom: 3px solid #212121;
}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;700&display=swap" rel="stylesheet">
</head>
<body>
    <nav class="global-padding navbar clearfix">
        <a href="#" class="navbar__logo"><img src="{% static "img/logo.svg" %}" alt="Interior Logo"></a>
        <ul class="clearfix navbar__menu">
            <li class="navbar__link-item"><a href="#" class="navbar__link navbar__link_active">HOME</a></li>
            <li class="navbar__link-item"><a href="#" class="navbar__link">PRODUCTS</a></li>
            <li class="navbar__link-item"><a href="#" class="navbar__link">HISTORY</a></li>
            <li class="navbar__link-item"><a href="#" class="navbar__link">SHOWROOM</a></li>
            <li class="navbar__link-item"><a href="#" class="navbar__link">CONTACT</a></li>
            <li class="navbar__link-item"><a href="#" class="navbar__search"><img src="{% static "img/search.svg" %}" alt="" class="navbar__search"></a></li>
        </ul>
    </nav>
    <div class="container">
        <p class="global-padding" style="margin-top: 20px;">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, ad tempore eaque autem at veritatis, modi a tenetur eius rem fugiat sunt esse! Placeat tempore quae quia eius alias! Ea officia modi cum sint pariatur architecto vero corrupti autem ex ratione asperiores commodi dolore fugiat, enim blanditiis quas accusamus sunt aperiam praesentium, accusantium excepturi? Ea, labore? Explicabo neque atque eveniet totam aperiam repellendus minima quia amet exercitationem laborum, quo tempore facilis dolores magni tenetur. Fuga nobis sit neque alias eos minima. Maiores quisquam soluta iure corrupti minima, ut enim error, ab nihil consectetur cupiditate, quod magni consequatur adipisci repudiandae architecto culpa suscipit! A minus omnis molestiae aut. Nam fugiat at, est voluptatem minus sint dolor commodi odio aperiam necessitatibus voluptatum ipsam nesciunt explicabo consequuntur nostrum hic, vitae eius blanditiis. Rem exercitationem, iure eligendi ullam accusamus, tempore impedit dignissimos perferendis quam iusto nulla molestias eos aliquam. Dolorum nisi atque nam! Iste vitae perferendis magni quos omnis impedit alias tenetur sed dolorem cupiditate totam sit nobis debitis blanditiis, cum ipsa, in earum ipsam. Asperiores atque molestiae fuga, quos tenetur repellat exercitationem magnam, voluptatibus aperiam dolore quisquam doloremque ratione perspiciatis autem in porro accusamus error accusantium iusto? Excepturi, pariatur repudiandae natus sed in totam voluptatibus laboriosam sint rerum nobis iusto quibusdam, perspiciatis alias ducimus quae dolorem eius, labore non ipsa quas. Tempore quis, beatae consequuntur explicabo asperiores eaque nisi ratione amet aliquid nesciunt atque? Enim laboriosam minima vero mollitia, quaerat porro facere laborum culpa molestiae perferendis? Quibusdam aut itaque, explicabo molestiae reprehenderit minima, et, soluta repellendus ipsam odio rem. Neque, dicta at voluptatum excepturi officiis vitae? Quidem debitis id sit amet recusandae facere rerum optio exercitationem necessitatibus cupiditate, illum magni ex reprehenderit fugiat culpa numquam maiores iste laudantium quasi ab neque! Quaerat consequuntur ipsa saepe quas perferendis consequatur neque rem pariatur corporis quia, enim eos dolorem reiciendis incidunt, ad architecto labore dignissimos adipisci sit in omnis cupiditate fuga? Blanditiis, maxime veniam quae ipsum labore ipsa quo necessitatibus, nostrum, magni omnis quidem voluptatum? Facilis vel reiciendis veniam consequatur dolorum minus! Blanditiis perferendis eveniet facilis. Assumenda corrupti libero eaque laborum labore expedita ab aperiam, neque fugiat id nesciunt dolore cupiditate reprehenderit, dignissimos distinctio ipsam. Minus sit, explicabo quae quos aliquam doloremque expedita consequuntur repellendus vel dicta? Dolorem aliquid placeat distinctio aperiam a aspernatur, ipsam quam minus doloribus, ad exercitationem quae? Ea iusto minus numquam fugiat inventore aspernatur perferendis temporibus pariatur nostrum cum eligendi, ab ratione modi similique quae rerum quasi tenetur dolor iure ut nemo molestias eveniet. Architecto soluta consequuntur optio quod, quos qui accusantium sit deserunt. Deleniti rerum explicabo sed. Voluptatibus, enim sit voluptas itaque quidem reiciendis asperiores quasi ipsum cumque consequuntur totam culpa suscipit natus repudiandae doloribus quas exercitationem veritatis sequi neque possimus qui voluptatum, nulla consectetur vel. Soluta reprehenderit perspiciatis debitis laboriosam, porro, possimus quis dolorem velit aperiam a aliquid blanditiis enim culpa dicta harum. Laborum reprehenderit enim est, eius laudantium quas ad molestias, quaerat debitis ullam quidem. Ut pariatur necessitatibus itaque at excepturi? Ratione, officiis amet repellat delectus recusandae eligendi quasi quidem esse similique quod at eum, placeat iure dignissimos magni modi debitis, nulla iusto facilis obcaecati ut. Sunt, delectus cumque aperiam exercitationem aut similique illum consectetur nostrum iusto iure aliquid impedit aspernatur dolore commodi. Asperiores saepe tempora architecto. Delectus dolorem distinctio obcaecati rerum eos eum fugiat ducimus, dignissimos, aperiam cupiditate non vel rem facere culpa eius doloribus laborum unde quod quos quae porro dolore natus. Et sed alias consectetur? Illo voluptatem possimus asperiores excepturi sed culpa dolore vitae est, esse laboriosam qui! Corporis, cupiditate ad tempore illo esse deleniti assumenda dignissimos mollitia eum odit dolores nostrum a odio maiores aperiam? Quisquam debitis perspiciatis expedita veritatis earum nemo modi eaque dolores nulla sapiente aperiam, assumenda magni quaerat iure nostrum cumque, repudiandae deleniti voluptatibus laborum! Perspiciatis quisquam aliquid nulla debitis doloremque, mollitia cumque ad totam quae suscipit, dolorum ratione perferendis consectetur magnam maxime facilis molestias quo impedit at asperiores, blanditiis et necessitatibus iure itaque. Ratione minus vero corporis mollitia velit ipsa quibusdam provident modi fugit suscipit, dolorem tempore? Recusandae ullam sit aspernatur sequi unde quas enim animi repellat perferendis rem nam praesentium, aperiam dicta eos temporibus quae! Laudantium placeat quibusdam consequuntur incidunt dolorem quia quos nulla sed aliquid accusantium quaerat consectetur obcaecati fugiat earum, laboriosam, inventore aspernatur amet at assumenda. Est dolore beatae non neque, ipsa ullam, perspiciatis laudantium ratione reiciendis vitae nobis veniam deleniti aliquam sapiente distinctio, voluptate enim praesentium fugiat libero repellat omnis ipsum. Veniam deserunt, ea in placeat distinctio facilis adipisci recusandae tempora iusto nisi excepturi sunt quae reprehenderit, tenetur enim, necessitatibus omnis et quisquam voluptate quia ipsum incidunt. Nisi sit ex mollitia aperiam nesciunt doloribus laborum rerum, dolorum deleniti asperiores ducimus maiores ea enim similique quas sunt? Sit fugit quibusdam adipisci culpa dolorum perferendis doloribus quo, placeat laboriosam expedita voluptatem totam dignissimos aspernatur aut soluta laborum! Repudiandae consequatur deleniti deserunt tempora error eveniet doloribus obcaecati, mollitia veritatis labore minima eum nihil ratione voluptate sit magni, voluptas quo exercitationem quia natus dolor. Cumque vitae ullam tempore hic fugiat esse a consequuntur libero asperiores minima cum earum repellat, ab, enim aliquam commodi saepe dolore nihil similique itaque laboriosam iure praesentium obcaecati! Eius, sed. In ipsam doloremque illum vel, sequi cupiditate, blanditiis dolores nihil aliquam veritatis facilis a impedit fugit cum, dolorum deleniti suscipit non velit laudantium ipsa maiores inventore nostrum animi? Error iusto, officiis saepe laborum nam repellat dolore aperiam ab deserunt distinctio quis amet vero, numquam obcaecati impedit quidem tempora corporis doloremque accusamus. Unde eveniet dolor quia maiores dolorem dicta. Veritatis nemo quos cum expedita doloribus, dolor recusandae soluta error, accusamus dolorum quis illo laudantium voluptatem aut repellendus optio, libero numquam eligendi enim totam distinctio. Sequi autem expedita eligendi vitae et quia dolorum adipisci. Expedita dolor tenetur, ipsa repellendus harum tempora aliquid delectus beatae quis ex cum sit sapiente hic deleniti incidunt ipsam repellat vitae. Porro distinctio, voluptatum rerum eius et corrupti fuga sapiente quia suscipit temporibus, nihil velit similique voluptatibus harum molestiae. Nemo, omnis quis facere ab nulla fuga tempore doloribus officia vitae commodi dolor, placeat voluptate beatae?
        </p>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>

Answer №2

You might want to consider applying margin-right to your navbar_menu element

.navbar_fixed .navbar__menu {
    float: right;
    list-style: none;
    margin-right: 10%;
}

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

Utilizing Twitter Bootstrap 3: When clicking a link within a modal window, the modal will close and an effortless scroll to

I am currently using the jQuery One Page Navigation plugin and Twitter Bootstrap 3.3 for my website. Everything seems to be working fine, except for one issue: the smooth scroll effect does not work for additional links in modal windows. For inline links, ...

jqueryjquery-pluginstwitter-bootstrap-3bootstrap-modalsmooth-scrolling

Angular and WEB API experiencing issues with the update function synchronization

Currently, I'm developing a CRUD example using dotnet core and Angular. In the backend, I have implemented a function in the CarController.cs as shown below: CarController.cs [Route("UpdateCar")] [HttpPut] public IActionResult Put([ ...

html.netangulartypescript.net-core

Tips for converting PSD template into HTML/CSS code

Currently, I am in the process of converting a PSD template into HTML/CSS. The file contains around 50 layers that have been exported to PNG using a Photoshop script. To begin, I structured the code like this: <div id="container_1"> <div id="co ...

htmlcsstemplatespsd

Sharing information using Fancybox 2

I have encountered an issue while using a form within a fancybox window to post data via Ajax to a php page. The form works perfectly fine when run outside of the Fancybox - insertion and response are both successful. However, when I run the same page thr ...

phpjqueryajaxfancybox-2

Several validation checks - logic malfunction

I have implemented a validation feature for passwords on a form, but I suspect there may be a logic error in my code that I haven't caught yet (blame it on the coffee machine!). Take a look at the JavaScript below: <script type="text/javascript"& ...

javascripthtmlformsvalidation

Updating padding through local storage does not function as intended

I recently added two buttons to my website for adjusting the padding. While they are functional, I find myself manually setting the padding for nav, main, and footer in the CSS. Here is the snippet of the code: main { padding: 20px 25%; } footer { ...

javascripthtmljquerycss

Deleting a database row when the cancel button is pressed

I have a scenario where I need to remove a database row containing a file name when the user clicks on the cancel button. However, despite my efforts, the database row is not being deleted. Can anyone help me identify what I might be doing wrong? Here is ...

phpjavascriptjqueryajaxdom

The CSS_MODULES encountered a module build error when utilizing the extract-text-webpack-plugin

While processing CSS with CSS modules in a production environment, I encounter an error, but everything works fine in the development environment. Here is the configuration for webpack.base.js: const path = require("path") const webpack = require("webpac ...

javascriptcssreactjswebpackcss-modules

transitioning from having async set to false to now setting it to true

Hey there! I'm currently facing an issue with a piece of code that needs some tweaking. The code snippet below is meant to load JSON files asynchronously, but I need it to work in sync with jQuerymobile for better functionality: var Loader = { b ...

jqueryajaxjquery-mobile

Unlock the power of Component level CSS in NextJS with this simple guide!

I don't have much experience with CSS, as I rarely write it these days due to the popularity of libraries like MUI. However, I recently found myself in a tricky situation where I needed to rewrite this example Emabla carousel in typescript and NextJS. ...

cssreactjsnext.jsnextjs-image

Obtain the printed value of a button via PHP and manipulate it using JavaScript

I have a dynamic table that displays results from a database. <table id="table" class="table datatable-responsive"> <thead> <tr class="bg-teal"> <th>#</th> <th>Date & Time</th& ...

javascriptjquery

How to use ajax to add multiple products to the cart in WooCommerce using a single add-to-cart button?

My goal is to utilize ajax in order to add multiple, distinct products to the cart with a single click of a button. The AddToCart-Button is located in SHOP before pagination. Whenever I try to add multiple products to the cart at once, the Ajax request is ...

jqueryajaxwordpresswoocommerce

JQuery plugin for creating interactive date selection forms

Having some trouble creating a dynamic form. The datepicker seems to only work on the first row and I can't click it. Tried a few different codes but no luck so far. Below is the code excluding the PHP part, which is just for inserting into a database ...

javascriptphpjqueryjquery-ui-datepicker

Using Ajax to create a loading animation

I want to display an ajax-loader.gif while my data is loading, and then hide it once the data has been completely loaded. Here is the code snippet for update: $.ajax({ type: "POST", dataType: 'json', url: "api/Employee/GetData", beforeSend: fu ...

jqueryajax

"Creating a custom navigation bar with full width and navigation corners on both left

I am struggling to make my website's navbar stretch to the edges of the container while maintaining full width. I have added left and right padding to each navigation item, but in smaller laptop resolutions, the items break onto a new line, which is n ...

htmlcssbootstrap-4

Modify the button input value within a PHP script

I am currently working on a piece of code that involves following different users and inserting values from a MySQL table. <td align="center"> <input type="button" name="<?php echo $id; ?>" id="<?php ech ...

javascriptphphtmlmysql

Is there a way to handle specific email format designs with PHP?

When trying to send an email with specific shipping information and tracking numbers, the formatting appears strange. Here is the desired format: Dear xyz , Per your request, this email is to no ...

htmlcssphp

Sending form information through AjaxPassing information from a form using

Currently, I am working on a project where one page opens a thickbox of another page that contains a form. Once the form is submitted and data is written to the database, I need the parent page of the thickbox to update specific rows of the form that have ...

javascriptjqueryajaxforms

Solution for displaying table cells in IE 7 and lower using Javascript

Lately, the community has come up with some amazing tools to push early versions of IE beyond their intended capabilities. For example, using multi-column CSS selectors. However, I've been struggling to find a JavaScript that can be loaded conditional ...

javascriptjquerycss

Inserting lines into the text, creating a visually appealing layout

Can a notepad design be created using CSS only? Is it feasible to include lines between text lines without using underscores? I want it to look like this example but with minimal spacing between lines and no manual insertion of span tags since the text wi ...

jqueryhtmlcss