Using a Bootstrap navbar in place of a select element

Currently, I am noticing that styling options for a <select> with <option> are quite limited. To overcome this, I am exploring the idea of implementing a bootstrap menu, which offers a wider range of styling possibilities. Here is the basic structure I have in mind:

<style>
    .menuBox {
        width: 200px;
    }
    .lightBlueBackground {
        background-color: aqua;
    }
    .darkBlueBackground {
        background-color: blue
    }
</style>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle border border-dark menuBox" href="#" id="navbarDropdown" role=&"button" data-toggle="dropdown" aria-expanded="false">
                 
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item width background-color" href="#" id="aValue">Aaaaaaaaaaaaaa</a>
                    <a class="dropdown-item width background-color" href="#" id="bValue">Bbbbbbbbbbbbbbbbbbbbbbb</a>
                </div>
            </li>
        </ul>
    </div>
</nav>
<script>
$(document).ready(function () {
    $('#aValue').click(function () {
        console.log('A');
        $('#navbarDropdown').text("Aaaaaaaaaaaaaa");
    })
    $('#bValue').click(function () {
        console.log('B');
        $('#navbarDropdown').text("Bbbbbbbbbbbbbbbbbbbbbbb")
    })
});
</script>

While in a <select> element, the down arrow is typically positioned to the right. In the navbar setup, the down arrow appears immediately to the right of the text within the

<a class="nav-link dropdown-toggle>
element.

My goal is to have the box that normally displays the menu item text remain blank, with the down arrow anchored to the far right. The text should be dynamically filled based on the user's dropdown selection.

Any guidance on how to position the down arrow to the right side of the <a> element would be greatly appreciated.

Thank you in advance for your assistance.

Answer №1

To customize the button styling, you can leverage flexbox properties and align it to the right using justify-content: flex-end. To maintain padding, you can include the class p-3.

$(document).ready(function() {
  $('#aValue').click(function() {
    console.log('A');
    $('#navbarDropdown').text("Aaaaaaaaaaaaaa");
  })
  $('#bValue').click(function() {
    console.log('B');
    $('#navbarDropdown').text("Bbbbbbbbbbbbbbbbbbbbbbb")
  })
});
.menuBox {
  width: 200px;
}

.lightBlueBackground {
  background-color: aqua;
}

.darkBlueBackground {
  background-color: blue;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="23414c4c57505751425363170d150d12">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f0d00001b1c1b1d0e1f2f5b4159415e">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle border border-dark menuBox d-flex justify-content-end align-items-center p-3" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">

        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item width background-color" href="#" id="aValue">Aaaaaaaaaaaaaa</a>
          <a class="dropdown-item width background-color" href="#" id="bValue">Bbbbbbbbbbbbbbbbbbbbbbb</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Alternatively, you can utilize Font Awesome icons and create a customized pseudo caret element in place of Bootstrap's default caret:

$(document).ready(function() {
  $('#aValue').click(function() {
    console.log('A');
    $('#navbarDropdown').text("Aaaaaaaaaaaaaa");
  })
  $('#bValue').click(function() {
    console.log('B');
    $('#navbarDropdown').text("Bbbbbbbbbbbbbbbbbbbbbbb")
  })
});
.menuBox {
  min-width: 200px;
}

.lightBlueBackground {
  background-color: aqua;
}

.darkBlueBackground {
  background-color: blue;
}

.dropdown-toggle::before {
  display: inline-block;
  font: var(--fa-font-solid);
  content: "\f0d7";
  float: right;
  margin-top: 0.2em;
}

.dropdown-toggle::after {
  border: none !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41232e2e35323533203101756f776f70">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccaea3a3b8bfb8beadbc8cf8e2fae2fd">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle border border-dark menuBox" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item width background-color" href="#" id="aValue">Aaaaaaaaaaaaaa</a>
          <a class="dropdown-item width background-color" href="#" id="bValue">Bbbbbbbbbbbbbbbbbbbbbbb</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

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

Difficulty in accurately identifying the current page on the appbar

I'm attempting to make the active page in my navbar stand out by giving it a white background color and skyblue text. However, for some reason, I can't get the text color to display as skyblue in the appbar. You can see how it currently looks in ...

Alignment issue with Div Element detected

I'm currently working on a JavaScript program where I need to create buttons and div elements dynamically. My aim is to have the div elements aligned horizontally. I've successfully created the buttons and div tags, but the issue I'm facing ...

Reveal concealed content when a responsive table becomes scrollable on a mobile device

I recently completed a project that was overloaded with tables. I made all the tables responsive, but they still take vertical scroll if they don't fit on certain devices due to their varying widths. For instance, Table A requires vertical scroll o ...

Overflowing container due to text in Material UI Accordion heading

While using the Material UI accordion, I have encountered an issue within the AccordionSummary component where the title should be displayed. I have created a flex layout with two flex items inside. The first flex item contains the accordion title, while ...

Is it practical to extract the page type/name from the CSS of the selected tab?

My website has multiple tabs on a single page and I want to integrate Google Analytics code. However, since all the tabs are part of the same page, I need a way to track which tab the user is interacting with. Would using CSS to check for the selected tab ...

Hide the paragraph element when the navigation link is being hovered over

Is there a way to hide a <p> element when hovering over a link? My website is built with Drupal and uses the Superfish module for the navigation bar. When I hover over the links, a secondary nav bar drops down. I want the slogan of the website to di ...

Generating a vertical bar adjacent to a bullet point in a list

Is there a way to add a vertical line next to each list item (except the last) without adding a new div? Adding a border line added an extra one that I didn't want. Sample HTML: <ul class="list"> <li><span id = "home">H ...

The navigation is designed to only show up as I scroll down the page, but ideally it should be visible

I am trying to make the navigation bar appear on page load instead of when I scroll down the page. Currently, I am using this jQuery code: <script type="text/javascript> $(document).scroll(function() { if ($(this).scrollTop() == 20) { ...

Avoiding overlapping in setTimeOut when using jQuery.hover()

Looking to trigger an effect one second after the page loads, and then every 3 seconds in a loop. When the user hovers over a specific element with the ID #hover, the effect should pause momentarily. It should then resume 2 seconds after the user stops hov ...

Embed a unique custom design sheet within a Facebook iframe

I'm looking to customize the design of my Facebook feed by adding a custom style sheet inside a Facebook iframe. Here's what I have: <iframe width="1000px" height="1000px" frameborder="0" name="f1e348592ed856c" allowtransparency="true" allo ...

The bottom border of the check boxes is not displaying in Internet Explorer

https://i.stack.imgur.com/EAkMC.pnghttps://i.stack.imgur.com/ysU1R.png While the checkboxes function correctly in Chrome, they are experiencing issues in Internet Explorer. Below is the HTML code being used: <div class="patient-div-w" style="width: 9 ...

Exploring the bond between siblings from a child's perspective

Is there a way to apply styling to the .item class when the corresponding input field is checked? <input> <span class="item"> I have discovered that I can achieve this using input:checked ~ .item {} However, my challenge lies in obtaining th ...

Tips for making Slider display the next or previous slide when span is clicked

I have implemented a mix of bootstrap 3 and manual coding for my project. While the image thumbnails function correctly when clicked, the span arrows do not navigate to the next or previous images as intended. Below is the code snippet: var maximages ...

Changing animation during mouse hover off

I've been experimenting with using 'translate3d' and 'transition' on hover to animate a div into view. While the animation works smoothly when hovering over the element, I'm having trouble getting it to transition back out of ...

Expanding a Material UI Accordion does not cause the surrounding content to shift or move

I'm currently designing a User Interface for a web application that allows users to have multiple projects open simultaneously. To achieve this, I decided to use an accordion as the logical component in the left navigation bar. The reason behind this ...

Animated Gradient Header with CSS

I've been attempting to add an animated gradient to my header class, but so far I haven't been successful. I want the gradient to apply only to the header, not the body. Here's the link I'm using for reference: Can anyone offer some i ...

What causes text inside a fieldset to sometimes appear bigger when viewed on mobile devices?

Have you ever noticed a strange quirk in Chrome that you couldn't quite explain? I recently stumbled upon a peculiar "feature" while using fieldset with responsive design. It seemed that the text within the fieldset appeared disproportionately larger ...

Tips for adding a CSS marker to the Videogular timeline at a designated time

My HTML player application allows users to search for a term and then displays the results along with the time when those words appear. By clicking on a specific sentence, the HTML player will start playing from that location. However, I would like to enha ...

Glowing semi-opaque about spotify?

Recently, I decided to challenge myself by recreating the Spotify homepage using only pure Javascript and SCSS as a way to test my front-end development skills. You can view my progress so far at this link, although please note that it's still a work ...

Tips for showing form data upon click without refreshing the webpage

Whenever I input data into the form and click on the calculate button, the result does not appear in the salary slip box at the bottom of the form. However, if I refresh the page and then click on the calculate button, the results are displayed correctly ...