CODEWITHSUNDEEP
htmlcsstwitter-bootstrapdrop-down-menu
Timothy Fisher
Timothy Fisher

Reputation: 1119

How to make this dropdown menu full width underneath the navbar?

I have a basic Bootstrap navbar here

What I want to do is this:

(Navbar)

-----Logo------Item----Dropdown----------------------------Login/Signup-----

(Dropdown menu)

-----Sub-item----Sub-item----Sub-item---------------------------------------

On hover I want to make the dropdown menu show full width right underneath the navbar. The hover event isn't what I'm having trouble with, I'm having trouble positioning it correctly to be full 100% width.

Update

I see that bootstrap adds position: relative to .nav > li, when I take that off in Chrome developer tools it goes full width off the screen starting at the position of the navbar element.

Solution

Working Example

The solution to my example was overriding Bootstrap's .nav>li to position: static.

I now know that this is called a mega menu :)

Upvotes: 1

Views: 1088

Answers (1)

Jishnu V S
Jishnu V S

Reputation: 8409

I dont know exactly what you need if my thought is right you want this link , check with the bootstrap mega menu

click here

Upvotes: 1

Related Questions