I want to remove the small arrow (as shown in the picture). I can't find the place to modify this...
Thank you!
Related
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
from couple of hours I try figureout how vertical drop down works. Maybe somebody will be so nice and explain my what Iam doing wrong.
I would like to achive vertical dropdown menu like is here.
When you click on eg 'UI Features' the sub menu roll down and move other elements down.
I tried couple of solutions but it still doesnt work. My dropdown appear above other elements.
Here is what I achived Codeply
Ps: I using Bootstrap v3.3.2
Use Bootstrap collapse button component
You can look at this question, and try the code user post in his question, the code works better, you can modify it according to your need..
1) Responsive Sidebar in twitter bootstrap 3.x
2) left sidebar in twitter bootstrap
The link 2 will also help you...
I'm trying to fix a problem I have with one of my custom theme I am working on.
If you browse to the site http://www.worclan.com/ you will see I have made a drop down menu. When you hover over a menu item or you are on the current page the item turns yellow.
The problem is I can't get the bottom of the yellow to touch the bottom of the containing menu box. There appears to be a added padding or margin which I can't track down and remove.
Any help or suggestions?
For future reference, you need to post the code in your question in your question.
If you set #navarea to line-height:0, it will work.
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 have a question about html and css.
How can i make a sidebar like the one in Google FAQ page?
I mean, the sidebar that when you put the cursor over, an arrow appears and if you move the cursor, the arrow moves with it.
I hope you can help me, thanks!
From the looks of it, they are listening for an event (in this case when div#gd-collapsible is hovered over) and the class "hover" is added to it.
So you have that #gd-collapsible is about 3 pixels wide and and on hover, the class "hover" is added which has 1px border solid on left and right, and that's about it really.
You can do this via jQuery, just make sure you style the div#gd-collapsible in a way that it's height equals the one from the right side bar.