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

The data-ls attribute is currently not permitted on the svg element. Is there a way to fix this issue?

Upon running my site through the w3cvalidator tool, I encountered the following errors: "Attribute data-ls not allowed on svg element at this point" and "End tag svg did not match the name of the current open element (use)". Below is a snippet of the cod ...

htmlsvgw3cw3c-validationsvg-animate

Eliminate borders surrounding WordPress text widgets

Looking for some help with removing the border around the widgets on my home page. Despite my theme's CSS removing borders universally, I thought targeting specific Div text widgets (such as text-7, text-6) would do the trick. While I can control the ...

csswordpresswidget

How can you effectively load shared header and panel HTML onto pages located in separate directories using jQuery Mobile?

I am currently developing a multi-page application utilizing jQuery Mobile and incorporating loadPage() to retrieve various pages. The overall structure is outlined below. landing.html /app-pages/page1.html /app-pages/page2.html /app-pages/page3.html ...

javascriptjqueryhtmljquery-mobilejquery-mobile-ajax

Top Jquery File Upload Tool (ajax)

I've come across various Jquery-Ajax-Upload scripts, but I'm curious to know which one you currently find to be the most stable and reliable? Thanks in advance! Peter ...

jqueryajaxupload

Creating a Submenu with HTML and CSS

After trying several guides on creating sub-menus, some involving JS, I decided to attempt a CSS-only approach. Unfortunately, I have encountered difficulty in making the submenu function correctly. You can view my code on fiddle here: http://jsfiddle.net ...

htmlcss

Unable to retrieve JSON data from the given URL

Here is the JSON data I have: { "status": "ok", "count": 1, "data": { "6217895": { "clan": { "role_i18n": "Saha Komutanı", "clan_id": 16682, "role": "commander", ...

jqueryjson

Learn how to implement the PATCH method specifically for the scenario when the user clicks on the "forgot password"

After clicking on the forgot password link, I want to display the password change form. However, I'm facing issues with calling the API to update the user's password. Below are the files I'm utilizing to develop the API, trigger events, mana ...

javascriptjqueryajaxajaxformforgot-password

There are currently no articles found that match the search query

Recently, I started working with Django, but I am facing an issue with slug. Whenever I send a request to the Slug, I encounter an error. The error message I receive is: Articles matching query does not exist. Furthermore, I am facing another error while ...

javascriptpythonhtmlcssdjango

What is the process for ensuring that the "ng-multiselect-dropdown" is a mandatory field within Angular 7?

Is there a way to require the ng-multiselect-dropdown field to have at least one selected item? <ng-multiselect-dropdown [placeholder]="'Select countries'" [data]="countries" [(ngModel)]="countriesSelectedItems" [settings]="co ...

cssangulartypescriptdrop-down-menuangular7

transform SQL data into HTML viewing

I am facing an issue trying to display information from a SQL database on an HTML page. Unfortunately, my code is not returning any results at all. <?php $host = "DRHATEM-PC"; $user = "sa"; $pass ...

phphtmlsql

How to extract a variable value from a different HTML page using jQuery

I have an HTML page named "page1.html" with the following content: <div> <div id="content"> content </div> <script type="text/javascript"> var x=5; var y=2; </script> <div id="ot ...

javascriptjqueryajaxget

I prefer to have the boxes lined up horizontally, but they seem to be arranged vertically

I'm struggling to get the color boxes to display horizontally with spaces between them. Currently, they are showing up vertically in a column layout. I want 4 smaller color boxes within a larger grey box at the top layer, with margins and padding app ...

htmlcss

Tips for adding a comment from a comment section to an array with JQuery

Here is the JavaScript code snippet I am working on for my website: var user = { username: " ", comment: " " }; var array = []; $(document).ready(function() { $("#mybutton").click(function() { user.comment = $("#comment").text(); user.usern ...

jqueryarraysnode.jsexpress

A step-by-step guide to implementing Google Analytics Event tracking using PHP

Implementing Google Analytics Events in Javascript can be done using the following code: ga('send', 'event', 'test', 'test','value'); I am trying to incorporate this feature throughout my entire project. ...

javascriptphphtmlgoogle-analytics

Determine the total number of hours along with the precise minutes

Could you assist me with calculating minutes? Here is an example: var time_in = '09:15'; var break_out = '12:00'; var break_in = '13:00'; var time_out = '18:00'; var date = '2018-01-31'; var morning = ( ...

javascriptjquery

Reloading data in Angular using jQuery DataTables

After successfully implementing the jQuery datatables library, I encountered an issue where new data retrieved from my API was not displaying inside the datatable as expected. Instead, it was being shown below the table using ng-repeat. It seems that the d ...

javascriptjqueryangularjsdatatable

What is the best way to center two items within a border?

Here is the CSS code I wrote to center align my text with a bottom border: .arrow-down { width: 2rem; display: inline; position: absolute; top: -0.6rem; left: 50%; margin-left: -59px; background: $grey_200; z-index: 5; } .showless > se ...

javascripthtmlcsssass

New feature that allows color change to be black or white depending on background color

Can anyone suggest a function from material UI that can automatically change text color to either white or black based on the background color? For example: <AppBar color="primary"> <Toolbar> <Typography color="i ...

htmlcssreactjsmaterial-ui

Displaying a jquery delay prior to revealing the content

I need help figuring out how to temporarily hide something using jQuery. Unfortunately, the code I've written doesn't seem to be functioning correctly. Could it be that the delay time is too short? $('#mainForm').hide().delay(8000).sh ...

jquerydelay

Differences between CSS Display None and Collapse

Can you explain the distinction between the following two options? display: none; visibility: hidden; I always thought that visibility: collapse was only applicable to tables. Am I mistaken? ...

htmlcss