I am facing problems with horizontal scrolling menu into my website.
I used the code of w3schools for this navbar. The problem is that it does not applies to the nav menu. Therefore, the scroll effect is missing both on PC and Mobile version.
Link to my website
Here is how nav menu looks like:
Remove the display: block style from your .active class.
The scrollbar does not appear because it fits inside without the need of a scrollbar. Set a max-width style to the parent element to get the scrollbar
Related
I have created a horizontal menu with an overflow-x: auto; property for the wrapper <div>, and a flex-wrap: nowrap; property for the main <ul>'s <li> elements.
One of the main menu items has a couple of children. I had started with overflow-y: hidden; for the entire menu, and a compromise that no sub-menus would be visible.
After delivering that, I am currently puzzled if there would be an alternative solution which would allow me to include the sub-menu in my setup also. The unwanted behavior is that every overflow-y option that I set to the wrapper <div> allows my users to scroll the parent menu out of the view vertically, when the sub-menu items become visible, since the sub-menu opens vertically. Ideally I would like to allow the sub-menu to open outside of the container (something similar to z-index:99999; which I have tried, but of course did not work). Chrome Dev Tools includes an overlay option which looked promising, but I could not find any documentation on that, and applying it did not work either.
This is a screenshot of the horizontal menu when the sub-menu is collapsed and I have scrolled to the sub-menu parent item horizontally.
This is what it looks like when the sub-menu is expanded and I have scrolled vertically slightly. The sub-menu items are appearing in the wrapper space, but scrolling to them forces the parent menu out of the view.
This is what the entire thing looks like if I add a height of 300px to the whole wrapper, to reveal the whole of the parent and child menus.
Lastly, this is the effect that I am after.
I am trying to make a scrollbar appear only when a user hovers over the component. The problem is that the scrollable element has a cutoff on the side of it when it is hovered compared to when it is not, like in the video below
This is the css I am using to make the scrollbar appear when it is hovered over
.scroll-on-hover:hover {
overflow-y: scroll !important;
}
And then it's applied like
<div style="position: fixed;" class="scroll-on-hover">
<nav style="background-color: navy; height: 100%;" >
...
</nav>
</div>
It happens because you are forcing it to show the scroll bar.
It is the expected behavior, a scroll bar will always occupy and overlap the content.
As you say:
I am trying to make a scrollbar appear only when a user hovers over the component. ...
There are two problems:
By making it just scrollable or not, you are not showing or hidding the elements.
The :hover works only on desktops, mobile cannot do that.
For the first problem, I encourage you to use "play" with display, translate, or any other prop that actually can hide and show the elements.
For the second, a similar approach can be :active, it's when you click and touch on mobile, instead of :hover that works only for the desktop mouse.
Edit
What you are looking for, is not a native scroll bar, it is a div, actually a lot of them and a huge peace of functionality.
Facebook is making a mimic of a scroll bar, a custom one, and for sure it's way more complex than an overflow-y style.
I'm using bootstrap to create a webpage. The problem is that I have a horizontal navbar a main tag and a footer. When I resize the screen, the navbar main and footer do not align, the navbar is wider than the main content, and the footer is more inside. To partially fix this I modify the style of each element, but when the navbar adjusts itself, it becomes wider than other elements in the HTML. Is there a global way to make everything align?
Its because you didn't include the collapse class of bootstrap which help to resize the navigation bar when screen is resized.Better to use a button which on clicking shows other tags in your navigation bar which is by the way vertical for small screens.
Also please share your code so you can be helped better.
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
On my website I use pure.css and the navbar consists of more elements than a small screen can display without scrolling. Therefore a scrollbar appears in that case, which I don't want.
I would like the navbar to stay at the top so that the navbar and the content scrolls simultaneously. When I use position:absolute; everything looks even worse. Also the mobile version of that navbar should still work (on mobile screens scrolling though the navbar should still be possible).
I also tried to deactivate overflow-y, but then, obviously, not every element on the navbar is clickable.
If you want that navbar and content scroll simultaneously, you shouldn't use position:fixed.
Remove position:fixed
Add float:left to menu div
Add float:right to content div
If I misunderstood what you want, the comment made by Marco Valente should be nice.