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
The image that I want to check is in a bootstrap dropdown menu, and I would like to check its size without having to click on the dropdown menu, is it possible or is just a fantasy ?
Thank you !
/* EDIT */
Here is a little demo of what I have, and I would like to be able to get the size of the image without having to click on the dropdown menu
the link:
https://codepen.io/anon/pen/zEVZmr
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?
Unfortunately the title I have given is very vague. I honestly wasn't sure how to word it. Anyway, basically I currently have a vertical navbar with a small caret beside the text. Once clicked, the particular button uncollapses and shows it's contents.
As seen in the image above, I'm attempting to have a secondary caret that should be sitting on the right of the button. This caret will follow suit on every other button once I get it working. Anyway, I'm currently using twitter-bootstrap and from what I understand, I could be able to split the button into 2, each having their own function. For example, if one were to click the text and the downwards caret, it should uncollapse the menu (Which it does fine right now). Though, when you click the right facing caret, it should just bring you to another page via an href or something. Currently, clicking either button will collapse and uncollapse the menu.
As you can see, the right facing caret separates itself from the original button but in a weird way. On the far right of the image is an example of the button separation I would like. In the Twitter-Bootstrap example, the "button" text and the caret both do different functions. I'm not entirely sure on how to achieve this via the current button setup I have. I'm quite happy with how the current buttons look visually but I want to be able to add that secondary caret that is justified to the right of the button. As well as have that secondary button separate nicely, similar to that of the Twitter-Bootstrap example.
TL;DR: how do I get a button to split into 2 piece via the current HTML that I have. I would like to keep the styling and I would like each button to have it's own functionality.
(Enlarge image)
http://i.imgur.com/Xm7ILoq.png
Just make two buttons and style them to be close to one another. Use CSS styling to get it done. You can lower the margins on the sides to get them closer, you could use border-radius to get rid of the corners in the middle, etc etc.
Just figure out how you want it to look. And forget about splitting buttons, that is not something you can technically do, or should want. Create 2 buttons and style them.
I created a css dropdown menu so my site will work with iphones. The dropdown is working correctly except for when you hover over a dropdown the sub items in the menu expand but when you hover over them the image on the main dropdown item looses it's color. I have it setup so that a different image is displayed when the mouse is hovering over it. Here is a link to pretty much the same code I have on my website. I just want the image to stay the same whether I am hovering over the main menu item or the subitems. Any help would be much appreciated.
http://jsfiddle.net/h5xZT/5/
To update your code it's simple. That should set you on your way. There is no need to use the "button" within a li item.
http://jsfiddle.net/h5xZT/19/