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
Related
I'm building a website on the Github page.
I started to add a drop-down menu on the header.
But, if I hover on button, the menu appears, however, I cannot click or hover on the 3rd and 4th link.
The link to code and website are written below.
Website:
css:
Thank you
I recommend to add the actual code next time instead of providing links but the issue for you in the z-indexing
as an example you can see if you add:
.header {z-index: 2}
.main {z-index: 1}
You will see that it is what you are expecting...also you might want to fix the .dropdown-content margin so you wont have a slight spacing break.
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
The problem is with the photography website I have created for some reason just on the "Contact" and "Bio" pages. It is only when the screen is resized so you will need to shrink down till the layout changes. Then when you hover over the menu tab "Albums" and the drop down menu appears it is pulling the content under it up slightly. It also creates a margin on the right that creates a scroll bar at the bottom. I have been combing through the CSS over and over trying to tweak things, can't find a solution though.
The website is:
"Bio" http://www.sairjanephotography.co.uk/bio.html
"Contact" http://www.sairjanephotography.co.uk/contact/contact.html
Also I just noticed the actual contact page drop down menu is hard to actually get onto with the mouse where as the Bio one isn't.
Any help appreciated
You can ditch the javascript approach, and just use CSS. Something like this would work; just apply left: 100% to get it on the right instead of below.
Edit: sorry for not reading the problem earlier. Your problem is that you have defined width on your ul element. On line 277, you have:
/*Re-centres the nav menu on phones from tablet*/
#media screen and (max-width:37em){
.menu ul{
font-size:4em;
width:18em;
}
}
But if you remove width: 18em, all is well, it appears.
To clarify on this, you shouldn't be setting fixed widths if you want to acheive a good mobile design. Instead, try to use tricks like text-align: center (coupled with display: inline-block, and display: block; margin: 0 auto;.
I think the other part of this question had to do with the hiding of the title. If you still want your header to show, you could either change its z-index to anything higher than the dropdown, or you could use an ajacent selector to give the main content a margin-top when the dropdown is active.
For example:
.menu.open + main {
margin-top 3em;
}
/* Add some transitions for show possibly */
main {
transition: 1s ease margin
}
I am having issues with my navigation bar CSS.
I want it to look like :
http://i39.tinypic.com/28is4uw.png
But this is what I'm getting:
http://i40.tinypic.com/akecl5.png
The only way for me to make it work like that is by using:
.under-menu { position: relative; z-index:999; }
but this kills the submenu links.
Thanks a lot!
Not a perfect solution, but at least some if we want to support IE, if not just adding
pointer-events: none;
Will fix the problem. This demo doesn't include pointer-events.
Here is a demo:
CSSDesk
In summary, I added the wave background inside the dropdown (in the li where the link and the drop ul is), and the effect is almost the same with your second try, with the only differents that I mask the top part of the drop down with the background that I added in the LI.
You will see that the wave background shadow becomes ticker, since the other background is still there (you can hide it with JS then it will become better, but since this is only a html/css topic I dind't add any JS )
So when you hover on the LI element the overlay background shows.
So that overlay background should be added for each li with drop-down. (like I said not a perfect solution)
I am trying to make a dropdown menu with pure html and css, but the submenus disappear when the cursor leaves the parent li, thus preventing me from clicking on the submenu. Here is a link to the test site, link text
I would really appreciate some help.
Roland A.
The problem is that the content div is above the menu and takes the mouseover out of your menu.. set the ul to have position:relative and z-index:100 and it should work..
update
actually just add z-index:100; to the #navigation rule