Challenges with Hover Dropdowns in Bootstrap Navigation Menu

Check out this screenshot of a navbar PSD design I'm aiming for:

To make my navbar dropdown show up upon hovering, I've implemented the following JavaScript:

$('.navbar .dropdown').hover(function() {
  $(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
}, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
});

Take a look at an example on bootply

However, when I click on a link in the dropdown menu, the main menu items lose their styles (color & border).

Any ideas on how to fix this?

Furthermore, do you have any suggestions on achieving the desired navbar dropdown as per the PSD file? My main issues are with the top and bottom borders of the dropdown list and main menu respectively.

I attempted to use the following CSS code to replicate the PSD design, but it didn't work:

#myNavbar ul li.dropdown a:hover, 
#myNavbar ul li.dropdown a:active {
  border-bottom-color: #fff;
  background: #fff;
  z-index: 1001;
  position: static;
}

Your thoughts?

htmlcsstwitter-bootstrap

Answer №1

Your implementation of borders has several logical issues, such as specific selectors, overriding key styles, and missing some necessary styles.

Check out the Bootply version

To improve your design, remove the border attribute from the following styles:

#myNavbar ul li a {
    font-size: 16px;
    color: #434343;
    padding-left: 20px;
    font-weight: 600;
    border:1px solid #fff;
}
#myNavbar ul li a:hover, #myNavbar ul li a:active, #myNavbar ul li a:focus {
    background: #fff;
    color: #ffba00;
    position: static;
    z-index: 1001;
    border: 1px solid #d6d6d6;
}

Additionally, to align with your graphic, add padding to .dropdown-menu like this:

#myNavbar .dropdown-menu {
    z-index: 999;
    position: absolute;
    margin-top: -1px;
    background: #fff;
    padding:20px;
}

Furthermore, address the 'jumping' effect caused by :hover due to the style attribute border:0 on a:hover

Remove the border-***: 0 attributes in the following CSS class:

#myNavbar .dropdown-menu li a:hover {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    color: #ffba00;
    border-bottom: 1px dotted #d6d6d6 !important;
}

Finally, ensure the last link element in the dropdown menu matches the image by removing its border using the :last-child CSS selector:

#myNavbar .dropdown-menu li:last-child a {
  border:none !important;
}

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

Dynamically insert a new row into an HTML table using AJAX and refresh the table with .load method

I am facing an issue with my HTML table that loads data dynamically through a PHP snippet containing SQL queries. There is a Select option and a button on the table to add a new row, which triggers an AJAX procedure to send the data to PHP for insertion in ...

javascriptjqueryhtmlajax

How to customize the hover and active properties of a checked checkbox in Vue 3 using Tailwind CSS and PUG?

It seems that checkboxes have a level of sophistication that I never anticipated, or perhaps my brain just can't quite grasp the nuances of checkboxes. After spending a significant amount of time researching and experimenting with checkboxes in a Vue ...

cssvue.jscheckboxpugtailwind-css

Change the color of the image to black and white and then back to its original state when a specific element is hovered over

Searching for a jQuery plugin to convert an image to black and white? Look no further! I've explored various options, but none quite fit the bill. What I'm really after is an effect that will revert the image back to color when a specific element ...

jquerycssimage

Displaying a dynamic progress bar across all elements in fullscreen mode

I am looking to implement a full-screen indeterminate progress bar that overlays all screen elements. Here is my specific use case: When a user fills out a form, including an email field, the email id is checked against a database via ajax. While waiting ...

javascriptjqueryhtmlcss

Is there anyone who can provide a straightforward solution (code) for < something basic?

I have learned a lot about programming, but I'm stuck on one thing. How can I make an image stay in place when clicked on? What I mean is that when you click and hold on the image, then move the cursor, the image moves with the cursor. What I want is ...

phphtmlcss

Issues with updating the style in Internet Explorer and Firefox using JavaScript are currently unresolved

I am facing an issue with my program where a name from an auto-complete is sent to a JavaScript function that dynamically creates a label with a button inside. Surprisingly, the DOM methods used to set style properties do not work in Firefox and IE 7, but ...

javascripthtmldynamicinternet-explorer-8styles

Is there a way to increase the total of each row by two when a button is clicked?

Looking to enhance the sum of each row by two depending on whether a button is clicked. HTML: <table> <tr> <td> <input type="checkbox" class="prof" name="prof" value="0"> <input class=&quo ...

javascripthtmljquerybuttonsum

Is it necessary to use the strict doctype if our code is already valid with the transitional doctype?

Are there any drawbacks to using a transitional doctype with presentational or deprecated elements, even if our code is valid in W3C validation with a transitional doctype? Will we need to rewrite or edit the code of websites using XHTML/HTML transitional ...

htmlcssxhtmlw3cw3c-validation

Can bootstrap columns be offset only on large devices?

Is there a way I can have the title column float to the right side of the page only on medium devices and larger screens, while keeping it centered for smaller devices like phones? Any advice is appreciated! <div class="section header"> <div ...

htmlcsstwitter-bootstrap

Footer not positioned at the bottom of the page

I have been experimenting with different ways to keep my footer at the bottom of the page. Initially, I tried using position: static, but the footer ended up above the bottom of the page and the background was visible (similar to the image below). Then, I ...

htmlcssfooter

Tips for managing an event using the bxSlider callback API

I am currently using bxSlider to create a slideshow on my website. However, I now want to implement a manually controlled slideshow that also displays text content related to each image below the slideshow: Here is the code I have so far: <!--SlideSho ...

javascriptjqueryhtmlsliderbxslider

aligning divs in a horizontal distribution is ineffective when the divs become fixed in place

When distributing divs horizontally equally, issues arise when these elements are attached without spaces in between (particularly in Chrome and Firefox). For instance: http://jsfiddle.net/pdelorme/au9ouko0/ HTML : <div class="ul"> <div class=" ...

htmlcss

Steps for looping through an array and placing every set of three items into a fresh Div element

Looking to display an array of 100 mobile phone objects, with each group of 3 items in a new div with the class name row. Struggling with creating logic for displaying only 3 items per div using a for-of loop. Here's the desired outcome (JSX): < ...

reactjstwitter-bootstrapiterator

Styling text using CSS depending on the displayed text

Utilizing Awesome Tables (AT), I am extracting data from a Google Sheets document to display on a website. The HTML template in the sheets is used for formatting the data, specifically focusing on the table output with inline CSS styling. Since the templat ...

javascripthtmlcss

The font rendering in Safari appears to have distinct differences compared to other web browsers

My concern is related to the HTML tag below: <a href="/partner-team/team" class="button button__style--1">MEHR</a> This is how the CSS appears: a { text-decoration: none; } .button { padding: 0.2rem 4rem; curso ...

htmlcssbrowsercross-browser

Angular 2/4: Struggling to refresh child component's view

I need assistance with updating the value of "str" in the child component's view from the parent component. I want to do this by calling the "change()" function in the child component. Here is my code: import { Component } from '@angular/core&ap ...

htmlangulartypescript

Incorporate Angular directives within a tailor-made directive

I just started using a fantastic autocomplete directive called Almighty-Autocomplete. However, I feel like it's missing some features. The basic structure of the directive is as follows: .directive('autocomplete', function () { var index ...

javascripthtmlangularjsangularjs-directive

Safari causing rotated element to shift by 1px due to CSS3 Transition

Encountering a rendering issue in Safari with 180deg rotated elements. Two examples highlight the problem (tested on Safari 9.1): Odd width problem. The bottom element shifts to the right initially, and further on transition. Even width problem. It appea ...

csssafaricss-transforms

What is the best method for implementing numeric input in Vue.js?

I have experience developing web apps using Nuxt.js. I am currently trying to implement validation that excludes negative values and decimal points in all input tags (around 20-30) within the same Vue component. My approach involves injecting validation ru ...

javascripthtmlvue.jsnuxt.js

Delete the following td when the mouse hovers over it

How can I modify my code to remove the next td on mouseenter of a particular td? Currently, my code is removing the first occurrence of mouseenter on any td and the current mouseover td. Here is the snippet of my code. Can anyone help me identify what&apos ...

jqueryhtml