Ensuring the height of the HTML element for menu items matches the navigation bar

I've been struggling to customize a navigation bar styled with Bootstrap 4. My goal is to create a hover effect on the menu items similar to the image or code snippet provided, but without that annoying thin blue flashing offset below the item. Despite spending hours on it, I can't seem to get the orange element to match the exact height of the navigation bar.

Just a heads up: The HTML for this project is generated by a CMS, so I'm unable to modify the HTML directly. Therefore, any solutions provided should be CSS-only.

https://i.sstatic.net/7gYH5.png

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
...

cssbootstrap-4

Answer №1

If you want a quick solution, adjust the height of the navigation link items to match the navbar:

.navbar.fixed-top {
  height: 61px; /* <- This is currently set to 61px... */
}

.primary-navigation .navigation {
  height: 60px; /* <- Previous height */
  height: 61px; /* <- New height: make sure this matches! */
}

.primary-navigation .navigation .nav-link {
  height: 60px; /* <- Previous height */
  height: 61px; /* <- New height for consistency */
  border-top: 3px solid transparent
}


*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

...
/* The rest of the CSS code remains the same */

<!DOCTYPE html>
<html>
<meta charset=utf-8>
<title>example navigation</title>

<body id=page-my-index class="limitedwidth page-mycourses format-site path-my gecko dir-ltr lang-de yui-skin-sam yui3-skin-sam vorabversion-uebergangs-moodle-atidia-de pagelayout-mycourses course-1 context-1 editing uses-drawers jsenabled has-region-content used-region-content has-region-side-pre empty-region-side-pre">
  <div id=page-wrapper class=d-print-block>
    <div> <a class="sr-only sr-only-focusable" href=#maincontent>Zum Hauptinhalt</a> </div>
    <nav class="navbar fixed-top navbar-light bg-white navbar-expand" aria-label=Site-Navigation>
      <div class=primary-navigation>
        <nav class="moremenu navigation observed">
          <ul id=moremenu-63e7e823a2eea-navbar-nav role=menubar class="nav more-nav navbar-nav">
            <li data-key=home class=nav-item role=none data-forceintomoremenu=false> <a role=menuitem class=nav-link href="" tabindex=-1> Start </a> </li>
            <li data-key=myhome class=nav-item role=none data-forceintomoremenu=false> <a role=menuitem class=nav-link> Dashboard </a> </li>
          </ul>
        </nav>
      </div>
    </nav>
  </div>

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

The default setting for the calendar picker indicator should be enabled

Whenever I hover my mouse over it, an indicator pops up, but I want to make it the default <input type="date" class="form-control" name="Date" [(ngModel)]="opening_date" (ngModelChange)="Operating()" style="width:550px" required> inp ...

htmlcss

Safari displaying incorrect sizing for table nested in inline-flex container

When a <table> is placed within an inline-flex container that has a flex-direction of column, Safari displays the table with a different cross-size compared to Chrome and Firefox. This discrepancy makes me question if Safari's default display fo ...

htmlcssflexboxsafari

Expandable Bootstrap collapse and accordion open horizontally, not vertically

I want to use Bootstrap collapse but I want to keep my div-s with the content beneath each link, mainly because that's how i need it to work on mobile (the menu is a column and that the content opens under each link). Unfortunately, on website I have ...

htmlbootstrap-4

Utilizing Thymeleaf to cycle through a list with alternating colors

In my Spring Boot project, I have a Thymeleaf list that I am iterating through in the following manner: <div th:each="filename: ${files}"> <div class="bold badge" th:classappend="${__${files.index} % 2 == 0} ? 'badge- ...

springspring-bootbootstrap-4thymeleaf

Leveraging jQuery for vertical alignment of an image

I am trying to vertically center an image with the class .personal within a container with the class .personal-row (located inside .row-main) on page load and when resizing. Initially, I attempted using vertical-align: middle;, but that did not yield the d ...

jquerycss

Creating a responsive grid division

.subcategory-main-wrapper { display: grid; grid-template-columns: repeat(4, max-content); position: absolute; width: 100%; column-gap: 4%; justify-content: center; height: 360px; @media @tabletScreens { height: 280px; } @media @ ...

htmlcssresponsive-designcss-grid

What are some ways to make source code more visually appealing on an HTML/JSP page as it is being

I've recently created a webpage with some Java source code, neatly organized within blocks. However, I'm looking to enhance its appearance so it truly looks like Java code. Take a look at my page's code here for reference: Are there any onl ...

javascriptjqueryhtmlcsssyntax-highlighting

After applying the rotateY function, the z-index appears to be malfunctioning

My current project involves creating a page flip effect, which requires two overlapping div elements. Initially, both divs are side by side with the second div having a -webkit-translateY(180deg) property applied to it. The first div has a z-index of 2, wh ...

htmlcss

Building a Dynamic Web Widget with the Perfect Blend of HTML, JS,

While developing a javascript-based web widget, I am aiming to steer clear of using iframes and avoid relying on the page's CSS. It is infeasible for me to utilize custom CSS, as it defeats the purpose, and iframe integration would not present a user- ...

javascripthtmlcsstwitter-bootstrapweb-widget

Can a HTML submit button be styled with multiple colors?

One of my clients recently requested a submit button with 2 words and 3 different text colors: <input type="submit" value="SUBMIT NEWSLETTER" /> The color scheme for the text is as follows: SUBMIT = black, NEWS = black, LET = white, TER = black. I ...

htmlcss

The dropdown menu in the bootstrap is not being properly filled with content on the webpage

In my header file, I am attempting to add a bootstrap dropdown that will display the user id along with two other options in the dropdown menu. Within the header file, I have created a new div element for the dropdown and linked it to a php file where the ...

phpjqueryhtmlcsstwitter-bootstrap

Ensuring the width of a div matches the adjacent containers

I need assistance in creating a form that adjusts its width based on the form fields. The form contains both explanatory text and input fields, each enclosed in a div with inline-block set. The outer div (also using inline-block) should not expand beyond ...

htmlcss

What is the best way to split a Bootstrap navbar into two separate rows?

I'm struggling with breaking the navbar to have the navbar-brand in one row and the collapse menu in another. <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d0601060013 ...

htmlcssbootstrap-5

Implementing a watcher property in JavaScript to dynamically add a class to an element

I'm currently facing an issue where I need to apply a class to an element when a certain data property changes. My approach involves using a watcher to monitor the value change and adding a class through JavaScript, as demonstrated in the code snippet ...

javascriptcssvue.js

Move the container all the way to the left

On my page, I have a grey section with the heading 'Start Analysis' that needs to be shifted to the left along with all its contents. How can this be achieved? The HTML code for the section is as follows: <!DOCTYPE html> <html lang="en ...

htmlcsstwitter-bootstrap-3

Converting HTML to PDF using AngularJS

Can anyone help me with converting HTML to PDF in Angular? I have tried using the angular-save-html-to-pdf package from npm, but encountered errors. Are there any other solutions or custom directives available for this task? ...

htmlcssangularjspdfhtml2pdf

What is the best way to align <h2> and <img> elements that are set to display as inline-block?

I've been experimenting with aligning h2 and img (icon) elements and although I added display: inline-block, they ended up shifting to the left of the section. Is there a way I can center them instead? HTML: <h2>Coffee</h2> <img src=&q ...

htmlcss

What are the steps to update your profile picture using Angular?

In my Angular 6 application, I am implementing an image upload feature with the following code: Html: <img [src]="url ? url : 'https://www.w3schools.com/howto/img_avatar.png'"> <br/> <input type='file' (change)="onSelec ...

javascripthtmlcssangulartypescript

Can you answer this straightforward query about CSS positioning?

I am currently facing a challenge in creating a small div (header class) that overlays a main banner image div (banner class). When I maximize my browser window, the positioning is correct. However, upon resizing the browser, the header div maintains its m ...

htmlcss

How are the plugins configured for `postcss-import` implemented?

Recently, I've transitioned to using PostCSS exclusively with Webpack. As I explore the functionalities of using postcss-import to inline external stylesheets, I'm noticing that its options offer the ability to configure plugins and transformers ...

csswebpackpostcss