Customize the navbar on the screen to prevent overflow and eliminate the need for a horizontal

I have a customized navbar(bootstrap) on my webpage.

<nav class='navbar fixed-top navCustom '>

    <div class='navComp'>

        <input class='dateStyle' id='dateChart' type='date' value='" . $now . "'/>

        <button id='refreshBtn' class='refreshStyle' type='button' name='refresh'>Refresh</button>

        <form style='display:inline' method='post' action=''>
            <button id='logout' class='logoutStyle' type='submit' name='logout'>Log Out</button>
        </form>

    </div>

</nav>

Below is the CSS for navCustom and navComp:

@media (min-width:600px) {

    .navCustom{
        justify-content: center !important;
    }

}

.navCustom{
    margin-top: -1px;
    height: 33px;
    white-space: nowrap;
}

.navComp{
    position: absolute;
    text-align: center;
    border-style: solid;
    border-color: #dadada;
    border-width: 1px;
    border-radius: 3px;
    background-color: #fafafa;
    padding-left:5px;
    padding-right:5px;
    box-shadow:0 0px 2px rgba(0, 0, 0, 0.1);
}

The issue I'm facing occurs when the browser window is narrow.

The navbar overflows beyond the right edge of the browser, but the scrollbar does not appear.

The scrollbar only shows up when the divs containing the text Test go beyond the right side.

htmlcsstwitter-bootstrap

Answer №1

After some trial and error, the issue is resolved.

The .fixed-top class from Bootstrap was causing my element to not trigger the scroll bar due to its position: fixed property.

To fix this, I added position: sticky !important; to my .navCustom.

This required a slight adjustment to my CSS and structure, but I ultimately achieved the desired result.

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

Every time I attempt to utilize pdf.js, I encounter a Cross-Origin Request block

When attempting to read a local PDF file using pdf.js, I included the following script tag: <script src="https://cdn.jsdelivr.net/npm/pdfjs/build/pdf.min.js"> </script> To check if it was working, I added a simple console.log: ...

htmlpdf.js

Utilizing the Bootstrap grid system to seamlessly display images

I have been attempting to design a column that is divided into two nested columns, each containing images that should fill the entire height and width of their respective columns. However, I am facing an issue where the images are extending beyond the boun ...

htmlcsstwitter-bootstrap

When the page is resized for mobile, the Bootstrap modal shifts downwards

I am encountering an issue with a modal that pops up on my webpage when clicked. It is perfectly centered in a browser view and smaller views. However, when I resize the page for phones, the modal shifts down the page and requires scrolling to see it. How ...

javascripthtmlcsstwitter-bootstrap

Element that moves in conjunction with scroll (without using position:fixed)

A while back, I stumbled upon something that I can't seem to find now. I'm looking for a shopping cart similar to the one on the Apple store - a div element that isn't positioned absolutely or fixed. Ideally, it would be located in the cente ...

jquerycss

Troubleshooting Problem with CSS Display in Spring Security 3.2

After deciding to integrate 'Spring security 3.2.0' into my current web application, which was originally developed without Spring and utilizes Primefaces & EJB 3, I encountered a challenge. Upon starting the basic configurations, I noticed that ...

javacssspringprimefaces

Limit the maximum height of a list within a fluid-width content container

I came across this link The layout works fine when the elements are limited in the #commentWrapper, but adding more items pushes everything downwards. Copying additional <li>test</li> items clearly demonstrates the issue. I want the input box ...

jqueryhtmlcssheightfluid-layout

Enhance the Bootstrap parallelogram navbar menu by ensuring the menu items are perfectly aligned

I am working on customizing Bootstrap 5's navbar menu to create a rollover menu with parallelogram-shaped active menu items. I followed the approach recommended here, and while it works, the output is not as polished as I would like because the parall ...

htmlcsstwitter-bootstrapbootstrap-5

using angularjs to dynamically apply css styles

Below is the input I have: The HTML code is shown below: <input type="number" ng-class="{negative: amount < 0}" ng-model="amount"/> This is the corresponding CSS code: .negative { color: red; } If the amount is positive, no specif ...

javascripthtmlcssangularjsng-class

Tips for using jQuery to dynamically apply CSS styles to new content added to a webpage

I have encountered this question multiple times on stackoverflow and through google search, but unfortunately none of the suggested solutions have worked for me. My issue involves a page that loads an HTML page with empty sections, which are then dynamica ...

jquerycssdynamic

Modifying the color of the Payment Button in a Stripe Pop-up

I have successfully implemented the Stripe payment method on my leadpages, and everything is functioning well. However, I would like to customize the color of the Pay button to match the design in the attached image. Below is the code snippet used to disp ...

jqueryhtmlpopupstripe-payments

How can you adjust the width of the Material UI Select component?

Trying to customize the width of the Material UI Select component can be a bit tricky. To set the desired width, you need to assign a specific class to the FormControl component. This class, such as mw-120, should define the minimum width as 120px in your ...

htmlcssreactjsmaterial-designmaterial-ui

How can objects be positioned or moved in a linear fashion, and how to incorporate free fall when adding additional objects?

I'm interested in creating a system similar to a "vibrating table" with linear displacement. After studying various tutorials, I was able to achieve simulations based on the following examples: Following the tutorial "Authoring a Multibody Simulatio ...

htmlpython-3.xdrake

Is there a way to align both the horizontal and rotated lines to intersect at a common point in HTML and CSS?

As a beginner, I'm looking to create a structure resembling a thigh, leg, and ankle using thick lines. My aim is to rotate them with animation, ensuring that the joints between the lines mimic those of a knee joint and hip joint. Below is the code sn ...

htmlcssweb

There is no value inputted into the file

I'm facing a small issue while trying to retrieve the value from my input of type="file". Here is the code snippet: <tr ng-repeat="imagenDatos in tableImagenesPunto | filter: busquedaDatosPunto " > <td>PNG</td> <td>{{imag ...

javascripthtmlangularfile-upload

Real-time collaborative Whiteboard using WebSocket technology (socket.io)

I am currently working on developing a collaborative online whiteboard application using HTML5 canvas, Node.js, and Websockets (Socket.io). While my progress is going well, I am facing some challenges when it comes to drawing circles. I have been successfu ...

javascripthtmlnode.jscanvassocket.io

JavaScript - Unable to Modify Select Value with Event Listener

It's interesting how I can change the selected option in a dropdown list using JavaScript without any issues. However, when I try to do the same thing within an event listener, the option does not seem to change. Here's the HTML code: <select ...

javascripthtml

Designing a user-friendly search form using HTML

As a beginner in coding, I am attempting to set up a search form using basic HTML on a webpage. Unfortunately, I am facing difficulties in processing the results properly due to my limited understanding of certain terms. Here is my desired outcome: http: ...

htmlurl

How can I display an image next to an element when hovering over it?

Whenever I hover over a .tags element, I want to display the image next to it. Feel free to test this feature on this specific page. This is how I envision it should look when not hovering over any .tags cell (the cells in the final column all have the ...

htmlcss

What is the best method for deleting an uploaded image from a box?

My code is quite lengthy, so I'll just showcase the JavaScript portion here. Here is a snippet of my JavaScript code: <script type="text/javascript"> let current = 0; for(let i = 0; i < 5; i++) { $('#thumbnail-view- ...

javascriptphpjqueryhtmlcss

The process of binding two variables in the same select element

Here is the code snippet that I am working with: <div class="form-group "> <label for="field_type"><b>Type</b></label> <div class="input-icon right"> <select required class="form-control" ...

javascripthtmlangularjs