Navigating through tabs on a mobile device by scrolling sideways

Is there a way to create a dropdown menu with tabs in a bootstrap site where the icons extend beyond the width of the menu, allowing mobile users to swipe horizontally?

Check out the code here:

https://jsfiddle.net/6yw6rp02/1/

This is the current code snippet being used:

<div class="top-nav-mobile">
    <div role="tabpanel" class="top-nav-btns">

        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-shopping-cart"></i></a></li>
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-signal"></i></a></li>
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-times"></i></a></li>
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-bell"></i></a></li>
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-search"></i></a></li>
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-money"></i></a></li>
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-bug"></i></a></li>
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-wheelchair"></i></a></li>
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-envelope"></i></a></li>
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-bug"></i></a></li>
        </ul>

        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="asdf">

            </div>
        </div>

    </div>
</div>

I attempted using owl carousel but struggled to make it work without specifying a fixed number of items. Any suggestions on how to achieve this functionality?

javascriptjquerycsstwitter-bootstrapowl-carousel

Answer №1

For a mobile-friendly scroll-through menu, the simplest solution is to add a scrollbar and hide it so users can navigate without a visible scrollbar (or keep it visible if preferred).

Here's the CSS code I experimented with:

.top-nav-mobile .top-nav-btns {
    width: 280px;
    overflow: auto;
}
.top-nav-mobile .nav li {
     margin-bottom: 0px;
     display:inline-block;
     float:none;
     margin-right:-4px;
}
.top-nav-mobile .nav-tabs {
    border-bottom: none;
    white-space: nowrap;
}

*This CSS enables scrolling functionality without limiting the number of elements, removes extra space created by inline-block elements with negative margin, and keeps all items on one line with 'white-space:nowrap'.

.top-nav-mobile .top-nav-btns::-webkit-scrollbar { width: 0 !important; }

*To hide the scrollbar (optional)

Check out the working JSFiddle link for a demo: https://jsfiddle.net/6yw6rp02/4/ Hope this helps! :)

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

Locating the source of the function call within a file in Node.js

Is it possible to determine the location of a file if a method from a module is called within that file? For example: // my-module.js module.exports = { method: function () { // I would like to know the path to my-app.js here } } // my-other-mod ...

javascriptnode.jsdirectory-structure

Is it possible to request a GET on a server's JSON file using a specific key?

I am currently working on a project involving an auto-suggestion exercise using a JSON file located on a server. I'm not entirely clear on the web development terminology, so one requirement has me a bit confused: The requirement states: "On the keyu ...

javascriptajaxjson

What is the best way to resize an image to perfectly fit inside a div in a responsive design?

Currently implementing a fluid layout design using Twitter's Bootstrap. Below is an excerpt from my code: <div class="hero-unit" style="background-image:url('images/ball on sand.JPG'); background-size:100%;"> <h1>Pelican Volle ...

htmlcsstwitter-bootstrap

Searching within an Angular component's DOM using JQuery is restricted

Want to incorporate JQuery for DOM manipulation within Angular components, but only want it to target the specific markup within each component. Trying to implement Shadow DOM with this component: import { Component, OnInit, ViewEncapsulation } from &apo ...

javascriptjqueryangulartypescript

Font Awesome icons displayed using the <i class="icon-ok"></i> markup are not styled correctly and do not respond to events in Chrome

I implemented Font-Awesome, an iconic font designed for use with Twitter Bootstrap. Here is the markup: <i class="icon-remove reset-preference-button"></i> And here is the CSS: .reset-preference-button { cursor: pointer; } For JavaScript f ...

jquerycsstwitter-bootstrapfont-awesomejquery-events

How can one retrieve the x and y coordinates from the client's browser and pass them to the server in a Bokeh server setup?

I'm currently working on a Bokeh server app called getcoords.py. To start the server, I use the command: bokeh serve getcoords.py. The app includes a HoverTool with a CustomJS callback function and a quad glyph configured to trigger a selected event o ...

javascriptpythonbokeh

Encountering a CORS-like error causes issues for Swagger

Unable to retrieve data from the server. The access-control-origin settings may not be configured correctly. I have encountered this issue in the past, but it is crucial for me to get Swagger UI working properly this time. The JSON file I am attempting to ...

javascriptjavaxmlhttprequestcorsswagger

Vue.js application failing to display images fetched from the server

When I'm running my Vue.js app locally, the images are loading fine from the "src/assets" folder. However, when I deploy the app to Firebase, the images are not displaying and I get a 404 error. What could be causing this issue? I have tried using: ...

javascriptfirebasevue.jsvuejs2

Question about HTML Class. Explain the meaning of the hyphen (-) in a class

https://i.sstatic.net/wCbvo.png When looking at this image, is the '-' symbol serving as a connector between two ids or is the entire 'fa-facebook' considered an id? ...

htmlcssclass

Collect all chosen checkboxes into an array containing their respective id names, then transfer the data to PHP

I am currently working with a set of checkboxes displayed like this: <input type="checkbox" id="checkbox35080"></td> <input type="checkbox" id="checkbox23000"></td> <input type="checkbox" id="checkbox5000"></td> <inp ...

phpjqueryarrays

Managing Ajax errors for Internet Explorer 7

When I use jQuery ajax to open XML files, I am encountering an error in IE7. The alert message currently displays: "Error: error, [object Error]" This is my error callback function: error: function (a, b, c) { alert('Error: ' + b + ", " + ...

jqueryajaxinternet-explorer-7

Determine if checkboxes exist on a webpage using jQuery

I am facing a situation where a form is dynamically loaded via ajax. Depending on the parameters passed to retrieve the form, it may or may not contain checkboxes. I am looking for a way to verify the presence of checkboxes on the page and prompt the user ...

javascriptjqueryajaxcheckbox

Eliminate JavaScript comments with Regex in PHP

Looking to reduce the size of HTML code with the help of PHP and Regex. Here is the minify function: public static function sanitize_output($buffer) { $search = array( '/ {2,}/', '/<!--.*?-->|\t|(?:\r?& ...

javascriptphphtml

Creating concise one-liner If statements with Handlebars: a simple guide

I am seeking clarification on the correct syntax for this code snippet: <li class="nav-item {{# if undefined !== user}} hidden {{/if}}"> My goal is to add the class name hidden only if the user variable exists. When I try implementing this, it res ...

javascriptnode.jsexpresshandlebars.js

Trigger the click event on a specific class selector to extract the corresponding ID

I have an HTML Table with each row: <table> <tr><td><a href='#' id='1' class='delete'>delete</a></td></tr> <tr><td><a href='#' id='2' class='de ...

javascripthtml

Applying CSS styles exclusively to a div element and not its before pseudo-class

So I'm working on an HTML page with a div that looks like this: <div class="get-this"> blah blah </div> I've added a before pseudo-element to the div and now I want to apply a CSS style specifically to the div, not including the pse ...

htmlcss

Controlling CSS Styles in Angular using TypeScript

Currently, I am working on an Angular project that involves dynamically populating a calendar. In addition to this, I have a range of dates and the task at hand is to modify the background for specific days within this date range. To manage dates effective ...

cssangulartypescriptmomentjs

Attempting to run the npm install command led to encountering a SyntaxError with an

Recently, I made some alterations to my npm configuration and ever since then, I have been consistently encountering the same error whenever I try to install various packages. It seems that due to a personal mistake in changing the npm settings, I am now u ...

javascriptnode.jsnpmhomebrew

Develop a dynamic image flow to display images as they are generated automatically

In order to create an image flow similar to the example shown here, I am trying to load images from a database at runtime. However, I am facing an issue where I need to include the JavaScript file that controls the image flow after the AJAX call for loadin ...

jqueryajax

A guide on showcasing real-time data with Angular's service feature

home.component.ts <h1>{{ (reportsToday$ | async)}}</h1> <div echarts [options]="alertsDaily$ | async"> <div echarts [options]="alertsToday$ | async"> <div [onDisplay]="alertsDaily$ | async"> report.component.ts constructor( ...

javascriptangulartypescript