Creating a dropdown link that features an H3 element with Bootstrap 4

Can someone help me with an issue I'm having regarding dropdowns in a navbar? When using a normal nav-link (without a dropdown), I placed the menu text inside an H3 tag, but when I tried to do the same for the dropdown link, the arrow appeared below the title instead of beside it. I attempted replacing the H3 with a span and applying the same CSS styles as an H3, which fixed the arrow position but did not inherit all the other styles.

The third example is closest to what I want, but the font size is slightly off.

Original code without dropdown

html {
  font-size: 16px;
}

body {
  font-family: Arial;
  font-size: 1rem;
}

#logo {
  max-height: 2.5rem;
}

.nav_container {
  margin-bottom: 10%;
}

h1,h2,h3,h4,h5,h6 {
  margin-bottom: .25rem;
  margin-top: .25rem;
}

h3 {
  font-size: 1.25rem;
}

My attempts

html {
  font-size: 16px;
}

body {
  font-family: Arial;
  font-size: 1rem;
}

#logo {
  max-height: 2.5rem;
}

.nav_container {
  margin-bottom: 10%;
}

#navbardrop {
  font-size: 1.25rem;
}

#navbardrop2 {
  font-size: 1.25rem;
}

#navbardrop3 { 
  font-size: 1.25rem;
  margin-bottom: .25rem;
  margin-top: .25rem;
}

#admin_menu {
  font-weight: 700!important;
  margin-bottom: .25rem;
  margin-top: .25rem;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: .25rem;
  margin-top: .25rem;
}

h3 {
  font-size: 1.25rem;
}
cssdrop-down-menubootstrap-4

Answer №1

To achieve the desired effect, apply position:relative to the h3 element and position:absolute to the :after pseudo-element. Make sure to adjust the positioning accordingly. Thank you.

Answer №2

Solution to the Problem

Cascading Style Sheets (CSS)

#navbardrop{
  font-size: 1.25rem;
}

#admin_menu {
  font-weight: 700!important;
  margin-bottom: .25rem;
  margin-top: .25rem; 
}

h3{
    font-size: 1.25rem;
}

.dropdown-toggle::after{
    display: none;
}

h4{
    font-size: 1rem;
}

HyperText Markup Language (HTML)

<div class="nav_container">
            <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
                <div class="d-flex align-items-center">
                    <a class="navbar-brand" href="homepage"><img id="logo" src="images/logo.jpg"></a>
                </div>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link text-uppercase" href="index.php"><h3 class="font-weight-bold">Home</h3></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="add_mat.php"><h3 class="font-weight-bold">Add Material</h3></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="add_cat.php"><h3 class="font-weight-bold">Add Category</h3></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="add_type.php"><h3 class="font-weight-bold">Add Type</h3></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="add_model.php"><h3 class="font-weight-bold">Add Model</h3></a>
                    </li>

                    <!-- Admin Options -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                            <h3 id="admin_menu">Admin <span class="fas fa-angle-down"></span></h3>
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="../update_data.php"><h4>Update Data</h4></a>
                            <a class="dropdown-item" href="../bd_tables.php"><h4>Database Tables</h4></a>
                        </div>
                    </li>
                </ul>
            </nav>
        </div>

Outcome

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

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

Incorporating TextBox Values into a List Using Bootstrap

Currently, I am in the process of developing an application using C# ASP.NET MVC 5 with Bootstrap and jQuery. My familiarity with JavaScript is limited at this time. 1. Initially, my question was how to modify the JavaScript to restrict input to a specifi ...

javascriptjquery-uibootstrap-4

What is the most effective method for incorporating keyframes using JavaScript in a dynamic way?

Is there a way to animate an HTML element by using a variable with keyframes, but without directly manipulating the DOM? Below is the HTML code: <div class="pawn" id="pawn1"></div> Here is the CSS keyframes code: @keyframe ...

javascriptcsswebdom

The problem with Text Input and Label Effects

This code is currently in use. It seems to be working fine, but there's one issue that needs addressing: when moving from one input field to the next, the labels for each field are getting mixed up with their corresponding inputs. This problem will b ...

htmlcsstwitter-bootstrap

"Utilize jQuery's append method to dynamically add elements to the DOM and ensure

I am currently facing an issue with my AJAX function that appends HTML to a page using the jQuery append method. The HTML being appended is quite large and contains cells with colors set by CSS within the same document. The problem I'm encountering i ...

javascriptjqueryhtmlcssajax

What is the best way to achieve a full width table in an HTML format on a smartphone browser?

Apologies for my limited English proficiency. I am currently working on creating a horizontal scrollable table in HTML. My goal is to make the width of the table span beyond the browser's viewing area, so that sticky cell functionality can be implem ...

javascriptjqueryhtmlcss

Exploring the power of pseudo elements within Angular5

What could be causing the issue with regular pseudo-classes from CSS not functioning as expected in Angular5? One workaround is to replicate their behavior using Angular event handlers such as (click)="function1()" or (mouseenter)="function2()". Why is it ...

cssangularcss-selectorsangular5

Decrease the dimensions of the image while maintaining its width at 100%

I've got a dilemma with the images on my website that are linked from image hosting sites. They all need to be displayed at 100% width, but some of them have huge pixel dimensions which cause slow loading times. Is there a way to resize the images wi ...

javascripthtmlcssimage

Can a Chrome extension display a webpage in a separate window using only JS, HTML, and CSS?

I am currently working on creating a custom Google Chrome extension. My goal is to have a small window appear when the user clicks on the extension button, without using window.open or traditional pop-ups, to display a specific web page. I have a basic un ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension

Is it possible for JavaScript to capture scroll events while allowing clicks to pass through?

Currently, I have a setup where the user needs to interact with the layer behind the transparent scroll capture: http://jsbin.com/huxasup/4/edit?html,css,js,console,output scrollerCapture = document.querySelector('.scroller-capture'); scrollerC ...

javascripthtmlcssscroll

Establish a minimum width requirement for a Bootstrap4 webpage and ensure that scrollbars are visible

As I work on designing a website, I am facing an issue with responsiveness that I am willing to accept for now. I am looking to establish a minimum width for the overall page to be around 1000px, with a horizontal scrollbar appearing if the screen width is ...

csstwitter-bootstrapbootstrap-4

Using CSS and HTML to dynamically show rows in a horizontal line and create a new row when necessary

Can you arrange 3 table rows to display inline, so that after every 3 rows the table will automatically start on a new line and continue like this indefinitely? <?php $addon_name = $_SESSION['Add_On_OpName']; mysqli_report(MYSQLI_REPORT_INDEX ...

jqueryhtmlcss

tips for linking my webpage with the database

While working on a registration page, I encountered an issue where the entered information was not being stored in the database. Instead, an error message appeared: Notice: Undefined variable: sql in C:\xampp\htdocs\Bawazir\Untitled-1. ...

phphtmlcssmysql

Animate the transition effect as soon as the block is displayed

Looking to create a smooth page transition using CSS changes with the help of Javascript (jQuery). Initially, one of the pages is set to display none. page1 = $('.page1'); page2 = $('.page2'); page1.removeClass('animate').cs ...

javascriptjquerycssanimation

Sort slider items using Show/Hide feature in bxSlider

I am using a bxslider on my website with specific settings: $('#carousel').bxSlider({ slideWidth: 146, minSlides: 2, maxSlides: 6, speed:500, adaptiveHeight: true, moveSlides:3, infiniteLoop : false, hideContr ...

javascriptjqueryhtmlcssbxslider

Is nesting possible with the &:extend function in LessCss?

I've recently been exploring the Less &:extend feature. My goal is to nest multiple extends - essentially extending a class that itself extends another class. However, after testing it out, I'm not sure if it's working as expected. It ...

cssless

Incorporate a feature to activate menu upon hovering and deactivate menu when user moves cursor away in React

Recently, I delved into experimenting with react. Currently, my focus is on creating a navBar using material-ui and react. Whenever I hover over the menu, the drop-down appears. However, to close the drop-down, I am required to click outside of it. My goal ...

reactjsdrop-down-menumaterial-uionmouseoveronmouseout

Is there a way to prevent additional text from shifting down when hovering over my Nav bar?

I need help with my navigation bar design. I have successfully implemented a hover effect that increases the text size on hover. However, when the text size changes, the other links shift down slightly and push the remaining links to the right (except the ...

htmlcssnavbar

Challenges with incrementing in Jquery's each loop and setTimeout

http://jsfiddle.net/fxLcy/ - an example showcasing the use of setTimeout. http://jsfiddle.net/fxLcy/1/ - this demo does not include setTimeout. Although all elements are correctly positioned, I am in need of that delayed animation =/ My goal is to arrang ...

javascriptjqueryhtmlcss

maintaining the alignment of three div elements

I am struggling to keep three divs side by side within a container, each containing an image and text below it. I had this layout working perfectly before, but now the right div falls underneath the other two when the screen size is reduced, followed by th ...

htmlcss

Activate Popover on Third Click with Bootstrap 4

Is it possible to create a button that triggers a popover after 3 clicks and then automatically dismisses after one click using Bootstrap v4.3.1? Code: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.mi ...

javascriptjqueryhtmlbootstrap-4