What is the best way to create a responsive top bar for mobile devices?

Struggling with an issue while trying to create a top bar. It works perfectly on desktop mode, but the problem arises when viewing it on mobile - it's not responsive. I need help making it responsive. Can anyone fix this for me?

This is how my mobile view currently looks:

https://i.sstatic.net/q9iiV.png

I want it to look like this in the mobile view:

https://i.sstatic.net/uIxm3.png

header.html

This is the page where I've written all my code for the top bar.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b7babaa1a6a1a7b4a595e1fbe3fbe5">[email protected]</a>/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26564956564354084c5566170817100817">[email protected]</a>/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a2afafb4b3b4b2a1b080f4eef6eef0">[email protected]</a>/dist/js/bootstrap.min.js"
        integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
        crossorigin="anonymous"></script>
        <link rel="stylesheet" href="style.css">
    <title>Header</title>
</head>

<body>
    <div class="container-fluid bg-primary">
        <div class="row top-bar">
            <div class="col p-3">
                <span class="text-white">
                    Offer Zone Top Deal & Discounts <i class="fas fa-shopping-cart"></i>
                </span>
            </div>
            <div class="col "></div>
            <span class="text-white p-3">
                <i class="fas fa-map-marker"></i> Select Location
            </span>
            <span class="text-white p-3">
                |
            </span>
            <span class="text-white p-3">
                <i class="fas fa-truck-moving"></i> Track Order
            </span>
            <span class="text-white p-3">
                |
            </span>
            <span class="text-white p-3">
                <i class="fas fa-phone-alt"></i> 012 345 6789
            </span>
            <span class="text-white p-3">
                |
            </span>
            <span class="text-white p-3">
                <i class="fas fa-shopping-cart"></i> Log In
            </span>
            <span class="text-white p-3">
                |
            </span>
            <span class="text-white p-3">
                <i class="fas fa-shopping-cart"></i> Register
            </span>
        </div>

    </div>

</body>

</html>
htmlcssbootstrap-4

Answer №1

Consider using the following code snippet:

<ul class="menu-list">
<li class="item-menu">
<span class="text-blue">
Exclusive Offers and Discounts 
<i class="fas fa-tag">
`

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

My table elements are automatically being populated with <tr> elements thanks to Javascript

Upon viewing the screenshot: https://i.sstatic.net/Pwv2v.png it is evident that each element is placed within its own tr. My preference is to have each element contained in a td and then wrap everything within a single tr. Here is the updated HTML stru ...

javascripthtml

Oops! Looks like the page you're looking for can't

Recently I started working with Laravel and encountered an issue: The error 'View [admin.users.show] not found' appears when attempting to access the edit file within the admin users views folder. My current route setup is as follows: Route: ...

phplaravelbootstrap-4

Utilizing AngularJS for Your Business Website

We are in the process of developing a new commercial website to replace our current one. Concerns about performance are on our minds. The amount of data we have per page is not very heavy, with a maximum of 150 data binds. We plan to use AngularJS 1.2 t ...

javascripthtmlangularjs

Display Google spreadsheet column values on an HTML page

Looking to create a notification page on my Google Sites using data from spreadsheet cells. Here's a sample of HTML code from W3 CSS Tabs: W3 CSS Tabs Can someone assist me in inserting cell values into the <P> tags? https://i.sstatic.net/jk1u ...

htmlgoogle-apps-scriptspreadsheet

Live updates for downloads page menu using HTML and Bootstrap

I'm currently working on a menu page that features 3 tabs: Windows, Linux, Mac. When you click on the Windows tab, it will not only download the windows installer but also display installation instructions specific to Windows. Similarly, when you sele ...

htmlbootstrap-4

Passing arguments inside the source attribute of an image or link tag in Node.js and

As a beginner in NodeJS, I am facing an issue with passing arguments inside links and image sources. In my template.html file, I have included various scripts and elements to create a search form. The issue arises when I try to incorporate values from the ...

javascripthtmlnode.jsvue.js

Difficulty encountered while implementing a carousel using HTML, CSS, and JavaScript

I'm currently working on creating a carousel using only HTML, CSS, and JS. While it is functional, it does not perform as smoothly as I had anticipated. After completing one full round of images, there is an approximate 8-second delay before it star ...

javascripthtmlcss

Incorporate form checkboxes with the image's title preceding them within every individual div

Is there a way to dynamically add a form checkbox to each of these divs with incrementing id's? My current setup is as follows: <div class="img-wrap"> <img title="1" src="img.jpg" /> </div> <div class="img-wrap"> < ...

javascriptjqueryhtmlforms

"Escape the confines of traditional div sections with the dynamic features of

In the beginning, I have arranged two rows of three divs on my webpage, which is how I intend to use them later. However, when testing the 'mobile view', the divs in the section overflow and move into the next part below the section. This causes ...

htmlcssfullpage.js

Leveraging information from a single controller for another

I am currently developing a website using MEAN stack. I am facing an issue with passing data from one controller to the next. My goal is to transfer a selected option value to the next page. Here is the section with the select box: <div class="plumber ...

javascripthtmlangularjsmean

Display all attribute connections for a product in Prestashop

I have updated the products in my shop to include different combinations. These combinations involve a 'packaging' attribute with two options: a 100 units box and a 200 units box, each with its own unique reference number. On the product page, t ...

phphtmlcssprestashop

Achieving dynamic height in a parent div with a sticky header using mui-datatables

Here are the settings I've configured for my mui-datatables: const options = { responsive: "standard", pagination: false, tableBodyHeight: '80vh', }; return ( <MUIDataTable title={"ACME Employee ...

javascriptcssreactjsdatatablesmaterial-ui

Unexpected resizing of a div due to Vue animation

I'm currently working on a quiz and I'm trying to incorporate some animation effects when users navigate between questions. I've been experimenting with a fade in and out effect, but there seems to be a glitch. Whenever I click the button, t ...

htmlcssvue.jsanimationcss-animations

What steps should I take to generate a 2-Dimension Input Array from scratch?

I am working on a project that involves creating a 2-Dimensional array of text-based numerical inputs. I aim to use the standard HTML input type box for this purpose: <input type="text"> The number of rows and columns in the array will depend o ...

javascripthtmlarraysmultidimensional-array

The picture above just won't stay within the div

Ensuring my website is responsive across all devices has been a priority for me. However, I have encountered an issue where, upon scaling down the size of the web browser, an image positioned within a div starts to overflow. While attempting to address thi ...

htmlcss

Allow the submission button to be activated only when both the FromDate and ToDate have been

I am looking to activate the submit button once both the FromDate and ToDate fields are selected. In my scenario, all form fields must be filled out in order to enable the submit button. $('#myform > input').on('input', function ...

javascriptjqueryhtmlcss

Change the formatting to eliminate the file extension while ensuring the page is still accessible

I have a subdomain with .php pages in it and I want to remove the .php extension. After researching on various forums, I came up with the following code: RewriteEngine On RewriteBase / RewriteCond %{THE_REQUEST} (\.php(.*)\sHTTP/1) RewriteRu ...

htmlmod-rewriteweb

Integrate a PHP variable into an HTML/JavaScript statement that was previously transformed from PHP

Incorporated within this PHP variable is a mix of HTML and JavaScript code. My task is to enhance it by adding another PHP variable. Specifically, I have a PHP variable denoted as $user->user_email. How can I seamlessly integrate this variable into th ...

javascriptphphtmlvar

How to align three columns in the center using Bootstrap 4

Is there a way to center three col-md-3 columns without using offset? Offset doesn't work for me as I would have to offset the first column by one and a half columns. Is there an alternative method to achieve this? Below is the code outline: .col- ...

htmlcssbootstrap-4

Prevent a button on my side bar from being clicked until the user has logged in?

How can I use Django and HTML to disable a button in my tab bar until a user is logged in? This is my sidebar: <div id="mySidebar" class="sidebar"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href ...

pythonhtmldjango