I have a navbar on my page where the left hand side contains a bunch of views and the right hand side contains a bunch of actions (eg. create)
On mobile devices, I want the left side to collapse into a dropdown box while the action commands on the right stay the same.
I can get this working but I can't get it looking right. I have some working code here.
http://www.bootply.com/OEYfZVIaGA#
Basically, the problem I have is on the mobile view, when I click on "Toggle view", it turns the entire navbar into a dropdown list and drags the right hand side buttons down as well.
I would like it to act just like a standard dropdown list (http://getbootstrap.com/components/#dropdowns-example). I would be happy if it didn't drag the New button down when I opened the dropdown list.
How do I customise the behaviour of the drop down list from a collapsed navbar?
Related
This is my first time on SlackOverflow, i hope that you can help me.
I'm trying to achieve something tricky regarding my skill on development and specifically on Bootstrap.
I've created a template with dual Navbar (top and left).
The left one is a fixed navside where there is 3 kind of experience : Expanded, Not Expanded, Not visible.
As you can see, my Expanded NavSide is working perfectly with Scrollbar and Dropdown inside the nav
Expanded SideBar with Dropdown
The not visible experience is also working perfectly.
Not Visible SideBar
When i'm working with my not expanded SideBar, everything is perfect if i don't have too many item menus. If i have too much items i can't scroll on the Sidebar because i've only activated my css for expanded js.
Not Expanded SideBar without Scroll
Where is the issue ? I want to keep the same experience for the not Expanded version with Dropdown displayed on the right of my navside. But if i put the overflow-y scroll on my navbar, the dropdown on the right side is not displayed anymore (but the scroll is working well).
Not Expanded Sidebar with scroll but no Dropdown
Any idea if what i'm trying to achieve is possible ?
I can share my code if needed :)
Many thanks !
In the pic I have attached, when I click on any item in the left side nav menu, the page in the right loads but the menu remains fixed and does not load.
How can I make a menu like this?
Can I do it using div? or Do I need to use
enter image description here
I am having an issue with a site I am developing on iPhones. When I click a select element on my phone it zooms the website out and adds white space to the right side of the screen.
This only occurs when I click one of the two dropdowns that are on the right side of the screenshot (Industries or Category). While if I click a dropdown on the left side (Services, or Companies) It doesn't add the white space to the left of the screen.
I can't seem to figure out what is causing this issue?
EDIT: A little harder to see in the screenshot, but the blue filters block should be all the way to the right size of the screen, but white space is added to the right side when a dropdown is selected.
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
I have a navbar with a user dropdown menu aligned right. When the user has a picture added, I would like to show a small thumbnail next to the users name. This is already done, however I think it is implemented in a flawed way.
When the viewport size shrinks, the image (as it is now) is put on the collapsed list of menu items at the bottom - which shouldn't happen. It should either disappear or stay with the users name.
Also I would like to have the picture clickable and 'grouped' with the user name.
I have made a test navbar of my code here:
https://nkhs.dk/navbar/navbar.html
Can you suggest a change to make this happen?
Regards, Niels.
It should either disappear or stay with the users name.
To disappear it use the .hidden-* class.
e.g if you want to disappear this image on widths <768px, you would use class .hidden-xs.
For more: http://getbootstrap.com/css/#responsive-utilities-classes