Bottom-anchored horizontal navigation bar for seamless scrolling experience

Is there a way to create a navbar with horizontal scrolling at the bottom of the page without compromising its scrollability? When I use position: fixed;, the navbar becomes non-scrollable.

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}
<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>  
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div>

<h2>Horizontal Scrollable Menu</h2>

You can view the fiddle here: https://jsfiddle.net/J1aaa/rco4kz70/3/

htmlcss

Answer №1

To create a scrollable menu, simply set the width and apply the overflow-x property for horizontal scrolling.

div.scrollmenu {
    width: 100%;
    background-color: #333;
    overflow-x: auto;
    white-space: nowrap;
    position: fixed;
    bottom: 0;
    display: block;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}
<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>  
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div>

<h2>Horizontal Scrollable Menu</h2>

Answer №2

If you want your element to stay fixed at the bottom and stretch across the entire viewport without overflowing, you can achieve this by wrapping it with a div container. In this way, it is not the content inside that gets fixed, but rather the wrapper div itself. The original structure will then overflow horizontally as intended.

.scroll-menu-wrapper {
  position: fixed;
  bottom: 0;
  left: 0; 
  right: 0;
}

.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}
<div class="scroll-menu-wrapper">
  <div class="scrollmenu">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <a href="#support">Support</a>
    <a href="#blog">Blog</a>
    <a href="#tools">Tools</a>  
    <a href="#base">Base</a>
    <a href="#custom">Custom</a>
    <a href="#more">More</a>
    <a href="#logo">Logo</a>
    <a href="#friends">Friends</a>
    <a href="#partners">Partners</a>
    <a href="#people">People</a>
    <a href="#work">Work</a>
  </div>
</div>

<h2>Horizontal Scrollable Menu</h2>

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

Enhance your dynamic php page with the use of a light box feature

Hey, I have created a PHP page that dynamically reads images from a folder and displays them on a gallery page. However, I am facing some issues - I am unable to link an external CSS file and I have to include all the CSS within the HTML. Additionally, I c ...

javascriptphpjqueryhtmlcss

Difficulty in displaying Font Awesome Unicode on website

I am struggling to populate a list with Font Awesome icons 4.7.0 in my HTML code using Bootstrap. Strangely, only the first icon is displayed while the rest remain invisible. <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font- ...

csstwitter-bootstrapbootstrap-4iconsfont-awesome

Interactive chart embedded within a container

I have recently designed a card using Bootstrap and I would like to include a table with some data in it. However, I am facing an issue where the table data spills out of the card when I reduce the screen size for responsiveness testing. Could someone pl ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-cards

Encountering a problem within a Maven project during execution

Greetings, I am relatively new to maven and seeking some assistance. Recently, my Maven project has started displaying a 404 error on the browser when I attempt to run it. I initially created this Maven project using the webapp archetype and everything w ...

htmleclipsemaventomcat7

Tips for designing the microphone appearance on the Google Chrome speech input interface

Google Chrome features an input control for speech recognition. If you want to know how to use it, check out this link. I'm looking to enlarge the microphone icon and possibly use a customized image for it. Increasing the width and height of the inp ...

javascripthtmlcssgoogle-chromestyles

FadeOut Television static on Canvas after a period of inactivity

Is there a way to smoothly fade out the TV noise after a specific timeout period? I found this code snippet on Stack Overflow that seems to address a similar issue: var canvas = document.getElementById('canvas'), ctx = canvas.getContext( ...

javascripthtmlcanvas

Toggling forms with HTML <select> elements: A step-by-step guide

In the process of creating a web application, I am faced with the task of registering users based on their specific category. To accomplish this, I have incorporated a combo-box where users can indicate their user type. My objective is to display an appro ...

javascriptjqueryhtmlcss

JSOUP is cleverly filtering out specific tags while navigating through the HTML tree

While attempting to navigate the HTML tree of a Wikipedia page, I noticed that certain blocks of HTML elements in the code are being omitted. Is there a way to prevent these omissions? CODE Document doc = Jsoup.connect(url).timeout(10000).userAgent(USER_ ...

javahtmlweb-scrapingjsoup

Updating Angular model remotely without relying solely on the controller

I am struggling to call the addRectangleMethod method from my Javascript code in order to retrieve server-side information into the Angular datamodel. However, I keep encountering an error stating that the method I'm trying to call is undefined. It&ap ...

javascripthtmlangularjstypescript

Encountered a problem while trying to update a list item in Vue.js

Greetings Everyone, I've successfully implemented a basic CRUD functionality in VueJS. The values are being inserted into a list, from which I can read and delete them. However, I'm facing an issue with updating any value. When I try to ...

htmlvue.js

Problem with jQuery offset: SWF position remains unaffected

I attempted to create a code that would position an SWF file on top of an HTML button using jQuery's offset function to determine the coordinates. However, despite my efforts, the SWF does not appear to move as intended. var offset = $("#button").off ...

jquerycssoffset

Content from PHP's unlink() function continues to persistently display

I run an Angular front end along with a PHP back end for my website. I utilize PHP's unlink function to remove specific images from Angular's assets folder: $fileToDelete = "../src/assets/images/".$name; unlink($fileToDelete) or die("Error delet ...

phphtmlangular

Guide to retrieving a user's current address in JSON format using Google API Key integrated into a CDN link

Setting the user's current location on my website has been a challenge. Using Java Script to obtain the geographical coordinates (longitude and latitude) was successful, but converting them into an address format proved tricky. My solution involved le ...

javascriptjqueryhtmlgeolocation

"Preventing the propagation of a click event on an anchor tag with

Is there a way to prevent the parent anchor from executing its href when a child element is clicked, despite using stopPropagation? Here is the markup provided: <div id="parent"> <h5>Parent</h5> <a id="childAnchor" href="https:// ...

javascriptjqueryhtml

able to move through the content without displaying the scrollbar

I am looking to keep my content able to scroll, but I don't want the scrollbar to be visible. I have written my CSS like this: #content-three{ width:100%; height:100%; position:relative; overflow:hidden; } .block_s{ width:90%; ...

javascriptjqueryhtmlcss

JQuery automatically selects an action upon 'change' event, but does not do so upon 'select' event

I'm hoping my explanation was clear. I have a text input field that utilizes the jQuery UI autoselect function. When a user selects an option, the input field auto-fills correctly. However, I encounter an issue when a user types something but does not ...

javascriptjqueryhtmljquery-uijquery-ui-autocomplete

The mysterious case of the vanishing jQuery traversal box

I'm currently navigating using previous and next buttons, but it seems to be malfunctioning if I click too quickly. My goal is for the navigation to remain smooth without breaking. var $currDiv = $("#start"); $("div").hide(); $currDiv.c ...

jqueryhtmlcss

Place the delete and edit buttons on the right side of the card

I am trying to align the edit and delete buttons with the image and premise name on the same line. Both buttons should be placed on the right side and have the same size as the card. Currently, the layout looks like this: https://i.sstatic.net/sNikU.png ...

htmlcssbootstrap-5

Tips for perfectly centering a light box and concealing a scrollbar

Hello, I'm a web designer and facing an issue with the alignment of my lightbox. The lightbox is not center aligned on any resolution, which is causing some trouble. I have also added a black overlay for transparency in the background, but it's s ...

jqueryhtmlcss

The full execution of Jquery show() does not pause until it finishes

Here is the sequence I want to achieve: Show a div element with the CSS class yellow Execute a function for about 5 seconds Remove the yellow class and add the green CSS class "state Ok" However, when running my code, the div container does not appear u ...

javascriptjqueryhtmlcssshow-hide