Is there a way to eliminate the scrollbar from the purecss navbar?

My website utilizes pure.css and the navbar has more elements than can fit on a small screen without scrolling. This results in an unwanted scrollbar appearing. I want the navbar to remain at the top so that it scrolls along with the content. However, when I use position:absolute;, the layout looks even worse. Additionally, I need the mobile version of the navbar to still be functional, allowing users to scroll through it on mobile screens.

I've attempted to disable overflow-y, but then not all elements on the navbar are clickable. Finding a solution that maintains functionality while keeping the design clean is essential for the optimal user experience.

htmlcssresponsive-designnavbaryui-pure-css

Answer №1

To achieve a synchronized scrolling effect between the navbar and content, it's best to avoid using position:fixed.

  • Delete the position:fixed property
  • Apply float:left to the menu div
  • Use float:right for the content div

If I didn't grasp your intention correctly, you might find Marco Valente's comment helpful.

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

Determining height of an element in AngularJS directive prior to rendering the view

As I dive into the world of Angular, any assistance is greatly welcomed. My goal is to vertically align a div based on screen size (excluding the header and footer) when the page loads, the window resizes, and during a custom event triggered by the user ex ...

javascriptcssangularjs

What is the best way to display a User's name as text on a Django page without having to refresh the page?

I'm currently working on a feature where I need to show a User's name on top of a form box when they enter their Employee number, all without needing to refresh the page. Here's how it should work: once the User fills in their Employee numb ...

pythonjqueryhtmldjangoajax

Buttons are misaligned and do not align on a straight line

Below is the code output: https://i.stack.imgur.com/avhUu.png I am attempting to enhance the symmetry of these buttons. The minus (-) button appears slightly smaller than the plus (+) button even though they have the same padding. I have experimented w ...

htmlcss

Using JavaScript, redirect to a specified URL once a valid password has been entered on an HTML form

Need help with JavaScript for password validation and URL redirection. I'm new to JS and used some resources like Password correct? then redirect & Adding an onclick function to go to url in javascript?. Here's my current code: ...

javascripthtmlforms

When inserting <img>, unwanted gaps appear between div elements

When I have <img> in the child divs, there is some space between them and a blue stripe appears under the image. How do I make them stack perfectly without any gaps? I am new to HTML and CSS and trying to learn for marketing purposes. Any help or ad ...

htmlcss

Applying CSS borders with circular corners

Can this unique border style be achieved using only CSS? ...

cssborder

Retrieve data from a text file using ajax and then return the string to an HTML document

Just starting out with ajax, I have a text file containing number values For example, in ids.txt, 12345 maps to 54321 12345,54321 23456,65432 34567,76543 45678,87654 56789,98765 Here is the Html code snippet I am using <html><body> < ...

javascriptjqueryhtmlajax

Tips for ensuring browsers maintain the aspect ratio specified by width and height HTML attributes when CSS is applied

I am seeking a method to reserve space in my layout for images before they are loaded by adding width and height properties to the img element. This approach functions as anticipated: img { display: block; border: 1px solid tomato; } <img src="" ...

htmlcssimage

Exploring the power of add() method in getStyleClass() along with some code snippets

Recently, I successfully created a custom button in JavaFX by tweaking the style of a simple button using the setStyle() method with different String parameters based on whether the button was clicked or not. I wanted to convert this customized button int ...

javacssanimationjavafxcustom-controls

Curved edges achieved without the need for relative positioning

Can anyone help me with a specific code snippet to achieve rounded corners for this page ? Currently, I am using the PIE.htc file which only works when I declare position:relative; throughout the layout, causing disruptions. Is there a code workaround that ...

htmlcss

Effortlessly Transform HTML into Plain Text Using jQuery

If I wanted to create a feature on my website where users can input text into a text area and then convert it to HTML by clicking a button, how could I achieve that? I'm looking for functionality similar to what Wordpress offers, where users can enter ...

jqueryhtmltextconverters

Arranging divs using the float property

I am currently working on a Django project where I have a large list of dictionaries in the view: 'description': [ { 'name': 'Parts', 'good': ['Engine', 'Transmission&a ...

htmldjangocssdjango-templates

"Ajax validation is causing the duplication of the HTML page content within an HTML

My PHP username validation with Ajax code seems to be duplicating my HTML page inside an HTML div element, which is used for displaying Ajax errors. Despite trying various solutions and searching on Google, I have not been able to find a resolution yet. Th ...

javascriptphphtmljqueryajax

Is storing text in data-content and utilizing bootstrap-popover.js compatible?

Is it possible to display HTML content in a popover using ? How reliable is it to store text in data-content? Can we expect it to function properly across all browsers? ...

phpjavascripthtmlcsstwitter-bootstrap

The discrepancy in percentages by a single pixel within Webkit

I am facing an issue with the positioning of two div elements. The first one has a height of 40% and the second one has a height of 60%. I have set the first element to be positioned at top: 0; and the second one at bottom: 0;. However, in Webkit browsers, ...

htmlcsswebkit

Implement the use of HTML buttons to dynamically change the source attribute of an image using

I am in the process of creating a webpage with 25 different images that will be displayed one at a time. Each image represents unique combinations from two sets of items: (ant, blueberry, ladybug, marshmallow, mushroom) and (blimp, truck, moon, ocean, redw ...

javascripthtml

Achieving left alignment for Material-UI Radio buttons: Float them left

Click here to view the demo https://i.stack.imgur.com/Yt4ya.png Check out the demo above to see the code in action. I'm currently struggling to align the radio buttons horizontally, wondering if there's an easier way to achieve this using Mater ...

javascriptcssmaterial-designmaterial-uistyling

Tips for securely encrypting a PHP file when combining it with an HTML file using the phpB

I am attempting to encrypt a .php file using phpBolt. It works fine when the file contains only PHP code, but it fails when there is a mixture of HTML and PHP. Here is the encryption code: <?php /** * src : source folder * encrypted : Output folde ...

phphtmlencryption

Utilizing Javascript and CSS for horizontal alignment from left to right

I have a JavaScript function that generates a list of store locations and creates a DIV beneath the map. Currently, the items are displayed top to bottom on the page. However, I would like to change the layout so that the items are shown as 3 in a row fro ...

javascriptcss

I attempted to activate the hover effect on a DOM element using JavaScript, but was unsuccessful. It appears that achieving this is not possible. However, I am curious as to how Chrome is able to

I attempted to activate the hover state of a DOM element using JavaScript, but had no success. It appears that this task is not achievable in the way I initially approached it. I have heard that creating a class with a hover function and then adding or ...

javascriptcssgoogle-chromehover