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

Angular Fragmentary Perspective

I have a lengthy form in angular that I am currently working on. I'm wondering if there is a way to divide it into multiple views and then link each of them back to the main view. <div class="container"> <div class="row" id="part1"> ...

cssangularhtml

Transferring the AJAX response into a JavaScript variable

New to AJAX and JS here. I am implementing an AJAX code that fetches data from a php service. I am trying to figure out how to store the returned data in a JavaScript variable, which I can then display on the UI. Below is my AJAX code snippet: <script ...

javascriptphpjqueryhtmlajax

Instructions for concealing and revealing a label and its corresponding field before and after making a choice from a dropdown menu

Currently, I am working on developing a form that will enable customers to input their order information. This form includes a selection list for payment methods, with three available options. If the user chooses either credit or debit card as the paymen ...

javascriptphphtml

Is there a way to create a duplicate form without any pre-filled text when clicking the "next" button using JavaScript?

This form contains the details that I would like to display on the page again when clicking the "Add Another Module" button. <div> <form class="in-line" id="module_info"></form> <div style="display: flex;"> < ...

javascripthtml

Achieve a full height for children without the need to specify a fixed height for the

I'm currently working on a container div that houses two child divs: the first one, positioned to align with its parent's left border, contains a series of buttons while the second one holds the main content. In essence, it operates like a tab na ...

htmlcssheight

designing a responsive form in the mobile environment

I have implemented a search form on my website with a button inside the text box. It works fine on desktop, but when I switch to mobile view, the positioning is off. I am currently using absolute positioning for the button to give it a fixed position. Is t ...

htmlcsstwitter-bootstrap

Completed Animation with Callback in AngularJS CSS

Currently working with AngularJS and hoping to receive a notification upon completion of an animation. I am aware that this can be achieved with javascript animations such as myApp.animation(...), but I'm intrigued if there is an alternative method wi ...

javascriptcssangularjsanimation

Is the Material-UI 1.3 font size failing to adapt to varying screen widths?

Looking to create an app with responsive font sizes using material-ui (v1.3)? Also, want the font size to shrink when the screen size is smaller and adjust automatically. However, the current code doesn't update the font size dynamically as the screen ...

htmlcssreactjsmaterial-ui

SignalR's postback interrupts the functionality of jQuery actions

On my screen, I have a widget that updates data and changes its class based on server-side interactions. It also responds to mouse clicks. To notify multiple clients of updates simultaneously, I'm using SignalR. The problem arises when I wrap everythi ...

c#javascriptjqueryhtmlasp.net

Having trouble with individuals gaining access to my gh-pages on Github

After creating a gh-pages repository on Github to showcase my portfolio, I encountered an issue where visitors were being prompted to log into Github in order to view the page. Gh-pages are intended to be public, so I am unsure why this is occurring. My ...

htmlcssgithostinggithub-pages

Help me understand how to display the data in a JSON array

{ "entries": [ { "id": 23931763, "url": "http://www.dailymile.com/entries/23931763", "at": "2013-07-15T21:05:39Z", "message": "I ran 3 miles and walked 2 miles today.", "comments": [], "likes": [], ...

javascriptjqueryhtmljsonjsonp

Text overlay on Material UI Card

I am currently using the Material UI Card and CardMedia components in my application, but I am having trouble with overlaying text on top of the image. Below is a simplified version of what I have been attempting: <Card> <CardMedia image={this. ...

cssreactjsoverlaymaterial-ui

Tips on keeping the size of a react-bootstrap modal constant and enabling scrolling instead of expanding

<Modal size="lg" scrollable show={showInvModal} onHide={handleCloseInvModal}> <Modal.Header closeButton> <Modal.Title>Check out our latest items!</Modal.Title> </Modal ...

cssreactjsbootstrap-4bootstrap-5

"pre and post" historical context

Is there a way to create a stunning "Before and After" effect using full-sized background images? It would be amazing if I could achieve this! I've been experimenting with different examples but can't seem to get the second 'reveal' di ...

javascriptjquerycss

Keeping track of the toggle state using a cookie

While searching for a way to retain the toggle state, I stumbled upon js-cookie on GitHub. The documentation provides instructions on creating, reading, and deleting a cookie. However, an example would have been really helpful in enhancing my understanding ...

javascriptjqueryhtmlcookiestoggle

Switching Unicode icon when element is clicked

My form has two inputs - one for text input and the other for submitting, like a button. I have added an icon to the submit button and want it to change when clicked. <input class="searchBtn" id="submit" name="submit" type="submit" value="&#xf002"& ...

javascriptjqueryhtmlfont-awesome

Updating the underline style of ant.d's menu item

Currently, I am working with ant.design to build my navbar. By default, the menu items in ant design have a blue-ish underline when selected or hovered over. However, I want to change this underline color to match the overall design of my project. I was su ...

cssreactjsantd

Do you think my approach is foolproof against XSS attacks?

My website has a chat feature and I am wondering if it is protected against XSS attacks. Here is how my method works: To display incoming messages from an AJAX request, I utilize the following jQuery code: $("#message").prepend(req.msg); Although I am a ...

javascriptjqueryhtmlajaxxss

jQuery does not trigger background image change in Webkit

const displayPreviewImage = (imageUrl) => { $('#slideshow-container').css("background-image", `url('files/images/store/content/templates/websites/preview_images/${imageUrl}'`); } I have a function here th ...

jquerycssajaximagebackground

The Bootstrap tab feature is malfunctioning when a tab is using data-target instead of href

While developing bootstrap tabs for an Angular app, I decided to use the data-target attribute instead of the href attribute to avoid any interference with routes. Here's a snippet of how I structured the tabs: <ul class="nav nav-tabs" id="myTab"& ...

javascripthtmlcsstwitter-bootstrapangularjs