I'm using Twitter Bootstrap
I need to draw menu line this:
https://www.dropbox.com/s/hl8moeabxxecu8j/dropdown.png .
So I need draw lines through vertical dividers.
Here what I have now - http://jsfiddle.net/KckU3/8/
I can't get how to make it ?
simply use
<hr class="divider">
that should give you what you want
Now there is:
<li class="divider"></li>
First you had a typo in the .dropdown-toggle class.
Then, you are not looking for a vertical divider, which would look like a border, but for a border, and you just need to hide some of it.
Here is your clue :
.navbar .nav > li > a.dropdown-toggle {
position: relative;
bottom: -1px;
z-index: 1005;
background: white;
padding-bottom: 12px;
}
ul.nav li.dropdown:hover ul.dropdown-menu {
/* ... */
border-top: 1px solid #000;
}
The padding-bottom is actually just one more pixel than defined by default.
The other important thing is the position to left or right :
ul.nav li.dropdown:hover ul.dropdown-menu {
/* ... */
left: 0px;
}
I fixed a few other things for better effects, but you have the main idea.
Updated jsfiddle
If I understood you correctly
<li><hr></li>
Should be useful
Your post is somewhat confusing, but from the image you posted, it appears you want to create a tabbed menu with a dropdown? If so, Bootstrap already lets you do that.
Tab Menus: http://twitter.github.com/bootstrap/components.html#navs
Dropdowns: http://twitter.github.com/bootstrap/javascript.html#dropdowns
Here's a demo that puts it together: http://jsfiddle.net/LWTqS/
Related
I have some stuff I'd like to change in my dropdown. The website is https://community.entermedschool.com/
Below is the list of things I have tried along with the code I used. But none of them seem to be working...
Increase the font size for all of the items in the dropdown menus.
Change the font-weight for all the items in the dropdown to 400.
#primary-menu * {
font-size: 17px;
font-weight: 400;
}
Auto-scale the dropdown size so that all the items fit in one line.
.sub-menu {
width: fit-content;
}
Any help would be much appreciated!
Thanks in advance!
Edit:
The dropdown with which I want these changes is the primary header which I have highlighted here:
I want all of the dropdowns to basically expand automatically so that all of the content 'breathes' in it.
Your width: fit-content; is working but there is no space left for the ::after (the right arrow >). Therefor you could add a margin-right to each li in the submenu (for example 15px) and subtract that amount from the right-property of the ::after:
.sub-menu li {
margin-right: 15px;
}
.site-header .sub-menu .menu-item-has-children:not(.hideshow):after { {
...
right: 0; //instead of 15px
...
}
It works if i change it in the dev tools...
I'm trying to change the background color of the li element when it's class changes from "dropdown" to "dropdown open" on click. I've managed to successfully change the color of the text (which is an a). However I can't change the parent li properties.
I've copied the code here: http://www.bootply.com/FK88owgjgL. At the end of the CSS file you'll see what I've managed to code concerning background color of the li and of it's child. I can't understand why font color works and background doesn't.
Any help will be much appreciated.
Thanks for your time
I think the problem is related to the floating elements inside the form, adding clear fix will help.
.navbar-right .dropdown-menu form:after {
content: "";
display: table;
clear: both;
}
And there is a bit extra background at the bottom due to the parent margin, which can be rest.
.navbar-right {
margin-bottom: 0;
}
Use this below, if you need to change the background of the search item itself(with the magnifying glass) when active.
li.dropdown.open > a:focus {
color: #000;
background: red;
}
DEMO: http://jsfiddle.net/1ub60vcj/3/
Is this what you want: http://www.bootply.com/rzkcuqK3jA
.nav.navbar-right.navbar-nav.bot-search {
background-color: #000;
margin: 0 -15px;
padding: 5px 0px;
}
I'm currently building my website and I've run into a problem. Here is the webpage.
I want to add 3px underlines to only the links, like this:
The line height of the text is 56pt, so the border-bottom is far too far away from the links. text-decoration: underline is too thin, and way too close.
They need to be about half this distance. As negative padding doesn't exist, how should I go about fixing it?
Now used to this code (This is demo)
Css
.HomeText p a {
color: red;
text-decoration: none;
position: relative;
display: inline-block;
vertical-align: top;
}
.HomeText p a:hover:after{
content:'';
position:absolute;
left:0;
right:0;
bottom:-3px;
border-bottom:solid 1px red;
}
Demo LInk
Try adding the following:
display: inline-block;
height: 1.2em;
Haven't tested extensively, but seems to close the gap nicely in modern browsers.
Answer 1: Accept that css has limitations and work round them.
Answer 2: The only way I can thing of doing this is a using a span displaying it is a block and adding a border and padding to the bottom - this process will open up a whole other can of worms though floats blocks inline text etc. So I would go back to answer 1.
did you try this?
a {
border bottom: 3px red;
}
I would like to add a tick mark to an active menu item, but can't seem to figure out how to with my current code. Here's a graphic of what I'm trying to accomplish (notice the tick mark hanging down (centered):
Any assistance would be greatly appreciated.
You may see the current site at:
http://www.redone.org/_dev/ski/menu2.html
The background-image solution presented in the other answers is the most common way to solve this problem. A nice alternative is also available since this particular graphic, a triangle, can be easily created in HTML + CSS; no images, canvas, SVG/VML or plugins required.
<div style="
position:absolute;
width:0;
right:0;
border: 10px solid #fff;
border-top-color: #000;
"></div>
I created a basic example of a menu using this technique. Polygons in CSS were explored at least as far back as 2001 by Tantek Çelik.
on the mouseover of below element
current_page_item
change the background image for that..//make one image with that color like call out
// this is like a psuedo code, this doesn't work in ie7 so you can use jquery
li a:hover
{
background-image: url(images/callout.jpg);
}
Your "current" menu item should be assigned an extra class (like "current"). Then you add a css rule for the "current" class which displays the extra graphic at the bottom.
Thanks for pointing me in the direction. Here's what ended up working for me:
#headerline {
overflow: visible;
border-bottom: 1px solid #2c5e93;
height: 40px;
}
#menu-main-menu li.current_page_item a{
color: #014783;
background-color: #89cefa;
}
#menu-main-menu li.current_page_item {
height: 50px;
background-image:url(ski_tick.png);
background-position:center;
background-repeat:no-repeat;
}
In order to make all my links looks like buttons, I've done that in my CSS:
a {
color: #06A;
text-decoration: underline;
margin: 10px 20px;
padding: 10px 20px;
/*background-color: #EEE;*/
border: #BBB solid 1px;
}
They look fine, however, they seem to mix-up, that is they are being positioned as if they had no padding or margins.
Take a look here, if you still don't see my point: http://picasaweb.google.com/lh/photo/1yjC0oyQUbBlo_2D4RqjLZsCgnyUSAKTKup5o2EMfkM?feat=directlink
<a> is by nature and definition an inline element, meaning that it can't be given widths, height, paddings or margins (along with a few other styles).
To change that, simply add display: block; which will turn it into a block level element enabling paddings, margins etc.
If you want something that will stay in the flow but be able to accept these styles, use display: inline-block;. This also applies to other inline elements like <span>.
The easiest solution is to set the line-height correctly (without changing display).
Use "display: block" to make padding and margin have a effect.
Try styling your links with display: inline-block;.
You may want to consider using the float style:
<a style='float:left' href='#' />
...which will let you do all the fun stuff and "help" position your anchors as a bonus.
(If you want things to stop floating, put clear:both )
#snowflake's question-level comment got me thinking.
It might help you to know that there are those who believe that using a list for this sort of content is better than marking up plain anchor tags (after all, this is a list of genres, is it not?).
The code for this would look a bit like this:
HTML:
<ul class="genrelist">
<li>Fantasy</li>
<li>Children's Literature</li>
<li>Speculative Fiction</li>
<li>Absurdist Fiction</li>
<li>Fiction</li>
<li>Word I can't read</li>
</ul>
CSS:
.genrelist {
list-style-type: none;
overflow: hidden;
}
.genrelist li {
/*background-color: #EEE;*/
border: #BBB solid 1px;
display: inline;
float: left;
margin: 10px 20px;
padding: 10px 20px;
}
.genrelist li a {
color: #06A;
text-decoration: underline;
}
The code above would display like this (full-size image):