does someone know how I can make my dropdown navbar responsive.
It's hard to explain what I mean, but you notice it if you check it out. Please resize you browser to notice it.
If you make your browser smaller you see:
HOME(active), discography & special, I only wish to see the ACTIVE left.
If you open the menu. You see "HIDEKI solo" next to discography.
But I want "HIDEKI solo" below discography. Same goes for SPECIAL!!! & Movie.
https://codepen.io/Nagashiwa/pen/xxRWwzO
Thank you!
Related
I don't know if this is possible, or if it is, then I'm very dumb.
So I'm using bootstrap 4 to make my wordpress theme. I would like to make the menu to never expand so it always showing the hamburger icon. Now, when the user click it, I'd like it to filled the entire screen like in this website www.tomango.co.uk.
I tried setting the width to 100%, nothing happens. Changing it to a set px also change the toggle button icon.
If you know how to do this, please help me.
This is what you need, please follow this...Just click on slide down, same as your requirement
https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp
My navbar overlaps/wraps to a second line when the screen resizes/reduces. This looks messy. I have used a toggle button for media devices, but this doesn't address the issue of when people resize the window.
There are two websites I can give an example of what I am hoping to achieve with my navbar/page:
https://www.facebook.com/
http://www.dailymail.co.uk/home/index.html
Note with both of these websites, that when the screen is resized, the page remains the same; although the window is reduced, nothing on the page is reduced. The navbar remains the same.
This is what I would like to achieve, but I'm not sure how?
And is it possible to achieve this with just the menu/navbar? Rather than making the whole website fixed in position?
All replies will be much appreciated!
Thanks!
John.
Try to style your navbar elements with display:table-cell and parent should be display:table.
Or you can go with flex.
Introduction to clearify the task
I have a Navbar on the left side of my page. It has two levels for Items. When it's displayed in a small device, only the icons of the first level are shown. If you hover over it a dropdown of sub-items wil be shown on the right side of the bar. So far so good.
When the user uses a normal device the first-level-items should be displayed as dropdown-headers and the sub-items should expand under their parent-items on click. So I planned to set the sub-items-container under the main-items with height: 0px; and exband it with javascript-onclick and a css transition.
But as you can see the sub-items are hovering over the main item.
Question
How can i ensure that the subitemlist is between the main-items and not over it?
Additionally the solution shouldn't destroy the responsivness.
Note: I really want to make my own navbar, so using Bootstrap is not an option. Also i'm sorry if the code is not the best, it's the first try.
Code
I have put the whole thing in a jsfiddle
you cant put it in sidebaritem you have to put it below it
For some reason when I go to a small enough size and the navbar changes to the dropdown one it will not expand no matter what. I cant figure it out.
Code: link
Thanks so much!
Can someone help my with this problem;
http://www.bootply.com/eN40Ko2uua
I have a navigation system made from the panel collaps, but the only part you can click on is the word while I would like the whole panel to link.
But if I place the and around the td it doesn't work,
if I put it around the div the design changes what I don't want neither:
http://www.bootply.com/10tPocupPp
Does someone have a solution for this problem to let the menu, submenu be clickable around the whole width/height.