Tips for rearranging the icon placement of the parent menu item on Bootstrap Navigation Bar for mobile display

I need assistance with adjusting the position of the bootstrap navigation menu bar parent menu icon, in mobile view.

Currently, the menu header displays a right-arrow-down icon at the end of the header name as shown below.

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

My goal is to change the highlighted right-arrow-down icon to a left-arrow icon, move the icon to the beginning of the parent header menu text, and also change the background color (gray) of the parent menu item on mouse hover as depicted below.

https://i.sstatic.net/6sWGt.png

Below is the HTML code for the navigation menu bar:

<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
    <li class="nav-item" style="background-color: #f5f5f5; height:33px; padding-top:8px;">
        <label class="label d-md-block d-lg-none">Welcome, abc</label>
    </li>
    <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ACCOUNTS</a>
        <div class="dropdown-menu">
            <a class="dropdown-item"><span class="k-icon k-i-plus"></span>New Prospect</a>
            <a class="dropdown-item">Accounts</a>
            <a class="dropdown-item">Prospects</a>
            <a class="dropdown-item">Account Reports</a>
            <a class="dropdown-item">My Account Reports</a>
            <a class="dropdown-item"><span class="k-icon k-i-star"></span> Favorites</a>
        </div>
    </li>
    ... (remaining code)
</ul>
</div>

To achieve this, it may be necessary to override the existing bootstrap classes, but I am uncertain which class to use. I have searched online for solutions using Bootstrap CSS but have not found an example that aligns with my requirements. Your assistance is appreciated.

Update: Here is a mockup dropdown of the modules when the hamburger button is pressed in mobile view -

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

This would be the layout once one of the modules is selected (Opportunities is the module in this example) -

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

Desktop View:

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

htmlcssbootstrap-4

Answer №1

To achieve the desired effect using font awesome icons, follow the instructions below. The triangle icon in Bootstrap is created using the border property on the after element of the toggleable anchor. Remove this style by adding border: 0 none; and apply the following styles to .dropdown-toggle


.nav-item.dropdown {
    position: relative;
}
#navbarSupportedContent .dropdown-toggle::after,
#navbarSupportedContent .dropdown-toggle::before {
    font: normal normal normal 14px/1 FontAwesome;
    vertical-align: baseline;
    font-size: 20px;
    padding-right: 5px;
}
#navbarSupportedContent .dropdown-toggle[aria-expanded="false"]::after {
    content: "\f105";
    position: absolute;
    right: 10px;
}
#navbarSupportedContent .dropdown-toggle[aria-expanded="true"]::before {
    content: "\f104";
}
#navbarSupportedContent .dropdown-toggle::after {
    border: 0 none;
}


@media only screen and (max-width: 992px) {
    .nav-item.dropdown {
        position: relative;
    }
    #navbarSupportedContent .dropdown-toggle::after,
    #navbarSupportedContent .dropdown-toggle::before {
        font: normal normal normal 14px/1 FontAwesome;
        vertical-align: baseline;
        font-size: 20px;
        padding-right: 5px;
    }
    #navbarSupportedContent .dropdown-toggle[aria-expanded="false"]::after {
        content: "\f105";
        position: absolute;
        right: 10px;
    }
    #navbarSupportedContent .dropdown-toggle[aria-expanded="true"]::before {
        content: "\f104";
    }
    #navbarSupportedContent .dropdown-toggle::after {
        border: 0 none;
    }
    .navbar-light #navbarSupportedContent .navbar-nav .nav-link:hover {
        background-color: #ccc;
        color: white;
        padding-left: 5px;
        border-radius: 5px;
    }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script src="https://use.fontawesome.com/b71241fd62.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="nav navbar-nav">
      <li class="nav-item" style="background-color: #f5f5f5; height:33px; padding-top:8px;">
        <label class="label d-md-block d-lg-none">Welcome, abc</label>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ACCOUNTS</a>
        <div class="dropdown-menu">
          <a class="dropdown-item"><span class="k-icon k-i-plus"></span>New Prospect</a>
          <a class="dropdown-item">Accounts</a>
          <a class="dropdown-item">Prospects</a>
          <a class="dropdown-item">Account Reports</a>
          <a class="dropdown-item">My Account Reports</a>
          <a class="dropdown-item"><span class="k-icon k-i-star"></span> Favorites</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">CONTACTS</a>
        <div class="dropdown-menu">
          <a class="dropdown-item">Item 1</a>
          <a class="dropdown-item"><span class="k-icon k-i-star"></span> Favorites</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">LEADS</a>
        <div class="dropdown-menu">
          <a class="dropdown-item"><span class="k-icon k-i-star"></span> Favorites</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">OPPORTUNITIES</a>
        <div class="dropdown-menu">
          <a class="dropdown-item">Item 1</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ACTIVITIES</a>
        <div class="dropdown-menu">
          <a class="dropdown-item">Item 1</a>
        </div>
      </li>
    </ul>
  </div>

Answer №2

It is not necessary to write a lot of code for a single change like this. Just follow a few simple steps:

1) Remove the dropdown-toggle class, as this controls the appearance of the down arrow.

2) Add a fontawesome CDN or alternative for the arrow icons, or use HTML unicode.

3) Insert the appropriate fontawesome icon inside the dropdown button, or use any other image icon.

4) To change the color, if you are using fontawesome or any other font-based icon, you can change the color using something like color:"anything". To change the background color, target the button ID or class and write background-color:"anything"!important;

Example Code:

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Hello, world!</title>
</head>

<body>

    <div class="dropdown">
        <button class="btn btn-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-angle-left mr-1"></i> Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js" integrity="sha384-7aThvCh9TypR7fIc2HV4O/nFMVCBwyIUKL8XCtKE+8xgCgl/PQGuFsvShjr74PBp" crossorigin="anonymous"></script>
</body>

</html>

I hope this helps! Thank you.

Answer №3

Here is an example that can assist you:

<nav id="sidebar" class="sidebar-wrapper">
    <div class="sidebar-content">
      <div class="sidebar-menu">
        <ul>
          <li class="sidebar-dropdown">
            <a href="#">

              <p id="demo">Dashboard</p>
            </a>
            <div class="sidebar-submenu">
              <ul>
                <li>
                  <a href="#">Dashboard 1
                  </a>
                </li>
                <li>
                  <a href="#">Dashboard 2</a>
                </li>
                <li>
                  <a href="#">Dashboard 3</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <!-- sidebar-menu  -->
    </div>

  </nav>

Custom CSS:

          @keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(10deg);
  }
  30% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(5deg);
  }
  70% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes sonar {
  0% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
body {
  font-size: 0.9rem;
}

/* Other CSS rules omitted for brevity */

JavaScript:

 var span = document.getElementById("deom"); 
        jQuery(function ($) {

    $(".sidebar-dropdown > a").click(function() {
  $(".sidebar-submenu").slideUp(200);
  if (
    $(this)
      .parent()
      .hasClass("active")
  ) {
    $(".sidebar-dropdown").removeClass("active");
    $(this)
      .parent()
      .removeClass("active");
  } else {
    $(".sidebar-dropdown").removeClass("active");
    $(this)
      .next(".sidebar-submenu")
      .slideDown(200);


    $(this)
      .parent()
      .addClass("active");
  }
});

$("#close-sidebar").click(function() {
  $(".page-wrapper").removeClass("toggled");
});
$("#show-sidebar").click(function() {
  $(".page-wrapper").addClass("toggled");
});




});

Make color changes using the provided CSS:

.chiller-theme .sidebar-wrapper .sidebar-header,
.chiller-theme .sidebar-wrapper .sidebar-search,
.chiller-theme .sidebar-wrapper .sidebar-menu {
    border-top: 1px solid #3a3f48;
    background-color : #171717;
}
.chiller-theme .sidebar-wrapper .sidebar-header,
.chiller-theme .sidebar-wrapper .sidebar-search,
.chiller-theme .sidebar-wrapper .sidebar-menu .active {
    border-top: 1px solid #3a3f48;
    background-color : #fff;
}

Adjust the arrow styling with the following CSS:

.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f105";
  font-style: normal;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  background: 0 0;
  position: absolute;
  left: 10px;
  top: 14px;
  transform: rotate(180deg);
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
  transform: rotate(90deg);
  left: 10px;
}

Manipulate text using DOM events in JavaScript.

Example: https://codepen.io/tharinduvindula/pen/zYxMQxo

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

jQuery parent() Function Explained

checkout this code snippet - https://jsfiddle.net/johndoe1994/xtu09zz9/ Let me explain the functionality of the code The code contains two containers: .first and .second. The .first container has two default divs with a class of .item. The .second contai ...

javascriptjqueryhtmlcsstwitter-bootstrap

Utilize the CSS exclusively for the specific element

nav ul { } nav ul li { margin-left: 7px; } nav.ul li a, a:link, a:visited { float: left; padding: 7px; margin-left: 15px; color: #ffffff; text-decoration: none; font-weight: bold; } nav ul li a:hover { } The styling above is ...

css

Interested in retrieving the dynamically changing value of LocalStorage

Hopefully I can articulate my issue clearly. I am implementing a feature where CSS themes change upon button clicks. When a specific theme button is clicked, the corresponding classname is saved to LocalStorage. However, since the key and value in LocalSt ...

javascriptjqueryhtmlcsslocal-storage

The hyperlink is malfunctioning

Seeking assistance with this issue. The menu items below (Get on Amazon etc) are able to change the information displayed on the page, however, the first menu should redirect to my index page but it's not working for some reason. <!DOCTYPE html> ...

htmlhref

Having trouble locating the CSS and JavaScript files within my Spring Maven project

I have a Spring framework application with a Maven project. In addition, I have CSS and JavaScript files under the WEB-INF folder. When attempting to link the JavaScript and CSS files like this: <link rel="stylesheet" href="../allDesign/js/vendor/anims ...

javascriptcssspringmavennetbeans

What is the best way to position the left sidebar on top of the other components and shift them to the

Currently, I am working on a project to display NBA data fetched from an API. I am aiming to recreate the design showcased here: Dribbble Design My main challenge lies in overlaying the left sidebar onto the main box and shifting the components sligh ...

javascriptcssreactjs

JavaScript error message stating that the setAttribute function is null

As a newcomer to JS, I am currently working on creating a task list webpage that allows users to submit projects and create task lists within each project with designated due dates. In order to generate unique ID tags for projects and tasks, I utilized UU ...

javascripthtmlnpmwebpack

Using Node.js to send instructions to an HTTP server in order to highlight or add color to specific elements within

I have set up a server that receives data from a gaze sensor, as well as an HTTP server that serves an HTML page. I am looking for a way to dynamically highlight elements in the HTML based on the incoming data. Any suggestions on what resources or techniqu ...

javascriptjqueryhtmlnode.jsnode-webkit

Issue with toggling JS checkboxes selection

Seeking assistance in expanding my knowledge of Javascript. I have a form with checkboxes and a JavaScript function that allows toggling between selecting and deselecting all the boxes. Everything is functioning as intended so far. The challenge arises f ...

javascripthtmlforms

Utilize Css3 MediaQueries to nudge @Media switch for hyperlinks

My website currently utilizes css3-mediaqueries.js for a mobile-friendly design, which is working well. However, some users are still requesting to view the "web-version" instead. Is there a way to override the current CSS on the homepage, specifically the ...

cssmedia-queries

Is there a way in CSS to apply multiple colors to individual letters within a word?

Is it possible to add random colors to every pixel of a letter or multiple colors to a letter using CSS? Check out this example. ...

csshtml

Placing an image within a table row that spans multiple rows to maintain center alignment in relation to other rows that are not span

Having trouble with centering the image in an email signature when viewed in GMail. The layout works fine in JSBin but appears uneven in GMail. Any suggestions on how to make sure it stays centered? Check out the code here https://i.sstatic.net/F2LXV.png ...

htmlcsshtml-table

Issues encountered with AngularJs filter search functionality

Why am I having trouble adapting this search filter from here? This is what my code looks like: controllers.js angular.module('starter.controllers', ['starter.services']) .controller('AppCtrl', function($scope, $ionicModal ...

javascripthtmlangularjs

Decrease the border-radius shorthand mixin, deactivate the variable

I have been working on creating a mixin for border-radius that will only apply when the values, determined by a variable, are greater than or equal to 0. I have set the default value in a variable as 3px, so if I input -1 or 'no', the border-radi ...

variableslessmixinscssshorthand

Transforming images with Imagick

I've been trying to generate thumbnails from PDF uploads using Imagick. I have a script that is supposed to handle this task, but unfortunately, it only uploads the file without creating a thumbnail. I know some of you may find this basic, but PHP is ...

javascriptphphtmlmysqlimagick

Customizing Mouse Pointers in CSS

My goal is to customize the click pointer on a website using CSS. I have successfully changed the default cursor, but now I am seeking help in changing different 'versions' of the cursor. Here's my current attempt at customizing the pointe ...

csscursormouse

A guide on integrating Javascript and CSS files in Express.js

I'm currently running a simple node server from a page.js file as part of a system setup test. Here's the code snippet: var express = require('express'); var app = express(); app.get('/', function(req, res) { res.sendFil ...

htmlnode.jsexpress

Transferring an image between two <td> cells within the same table

For a project, I'm working on creating a Checkers game. I have the checker board and pieces ready, but I'm struggling with the movement logic. My goal is to enable the image to move or transfer from one td element to another when clicked. A frie ...

javascriptphpjqueryhtmlcss

[Vue alert]: "Maximum" property or method is not declared in the instance but is being referenced during the rendering process

Here is my custom Vue component: Vue.component("product-list", { props: ["products", "maximum-price"], template: ` <div> <div class="row d-flex mb-3 align-items-center p-3 rounded-3 animate__animate ...

javascripthtmlvue.jsfrontendcomponents

shifting the angular directives to alternate the bootstrap class of hyperlinks

I have a collection of hyperlinks displayed on my webpage. <a href="#" class="list-group-item list-group-item-action active" routerLink='/route1' >Explore First Link</a> <a href="#" class="list-group-item list-group-item-action" r ...

htmlangularclasshyperlinkbootstrap-4