I am currently making a drop down navigation bar for a website. I am having trouble with it because I wanted to stretch the navigation bar accross the whole screen right under the banner. I used width: 100%; to make it do so. But when I hover over the list and the drop down menu appears it stretches across the screen as well. It was because of the position being relevant. I changed it and when I did the drop down menu is white until you hover over one of the li in it.
http://codepen.io/anon/pen/FDrau
Is the link to what i'm working on. Can anyone show me how to fix it?
Related
Please help me to fix these issues in CSS (without JS). I am studying and can't find answers to some problems with navigation. Please don't blame me :)
I created navigation and first screen for the site but stumbled with these questions. Here is a screenshot with all things: https://prnt.sc/ln3ytx and my pen on Codepen: https://codepen.io/a007mr/pen/mQKyYM
How to make background hover for all line?
My code is .menu-item ul a:hover {color: #000000; background: #d2d4d6;
but it doesn't work as well. How to make it like this: https://prnt.sc/ln3mvm
When I open the drop-down menu, part of navigation is jumping to the right. How to avoid this jump?
How to make navigation button in the corner for any desktop size? I am using
margin: 15px;
but it doesn't work well when I will make more screen resolution. It is not responsive. The button will not be in the right corner if I choose the larger desktop.
The same issue with all navigation. How to make a position for navigation
in one place for any desktop size?
How to open dropdown through click (not hover) and hide drop-down menu only through click? My code li:hover > ul. If I change on li:active > ul then drop-down menu appears only when I hold the button. How to make like *click button -> we show drop-down menu and can choose something -> *other click on "Learn more" and menu is hidden.
How to make margin for below the main button? :)
I wrote margin-top: 20px; but it doesn't work.
How to make the background of all navigation without margin?
What's wrong? How can I fix it? Please, help.
I will be try give you some reply:
How to make background hover for all line? My code is .menu-item ul a:hover {color: #000000; background: #d2d4d6; but it doesn't work as well. How to make it like this: https://prnt.sc/ln3mvm
1) Try uses block elements. Remember that css property
display: block; makes your element a block element.
When I open the drop-down menu, part of navigation is jumping to the right. How to avoid this jump?
2) Your items in the list must be made as blocks and it item (li>a) need to be
increased.
Common example:
https://codepen.io/bear-wolf/pen/YRvoWO?editors=1100#0
I have a floating top navigation menu that I recreated # http://codepen.io/micsad/pen/mmzrZO
I made one menu item stand out by giving it a different background color with a CSS id.
#promonav {
background: gray;
}
It looks OK when you can see all the menu items in the browser, but resize the browser and #promonav item starts to jump around uncontrollably. It's no longer aligned with the top nav menu.
Is there anything I can do to:
a) keep the floating navigation fixed to the top of the page
b) stop the stand-out menu item with a different CSS class/id from jumping around on smaller desktop screens?
Thank you
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 :)
I dont know exactly what you need if my thought is right you want this link , check with the bootstrap mega menu
click here
I've been working on my site: www.zdrctry.com.
I have a couple questions about the top navigation bar (containing Home, Contact Us, Cart, My Account):
How could I move the navigation bar down to the same level as the "Directory Theme" logo. It is similar to the Red Header of website: www.premiumpress.com.
I'd also like to know how to align the navigation links to the right side of the page.
How could I achieve this?
Put your navigation bar inside a div and make the div's width 100%. Now for the CSS for your nav bar element, put text-align: right.
To move the bar down, use absolute positioning and specify how far from the top of the page you want it.
My site uses wordpress. I have a right header as seen here http://www.gigster.me and a top centered drop down menu as a plugin for buddypress links. This renders the links on the top right un-clickable. I tried changing the z-index properties of the center tab but it's still not working. The drop down menu is causing the usable area to the right and left of the actual tab/menu to be visible but unusable.
I'm not a coder so i appreciate any help for amateurs like me.
thank you
Ziad
A few options:
Set the login section to display: relative; and that would push the rest of the page down.
Decrease it's z-index and when it loads, set display: none; for .header_right
Decrease the login screen's z-index, but increase it when it's dropped down.