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;
}
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 had this kendo treeview. When select a node or sub's-node I want the orange color at full line and same with others (refer to image below).
I to use script below, but when it come to sub's-group the align is not same. Appreciate your help.
.k-treeview span.k-in {
margin-left: -10%;
padding-left: 10%;
padding-right: 60%;
}
DEMO IN DOJO
The way the tree currently works is that the li.k-item have a left padding of 16px, so for the second level it's 32px and so on.
What you need to do is put the indenting mechanism somewhere else. Your li.k-item must have no left padding, but a div inside must. Depending on your item template, it will be something like:
.k-treeview li > div { padding-left: 16px }
.k-treeview li li > div { padding-left: 32px }
.k-treeview li li li > div { padding-left: 48px }
You can generate a dozen levels with less or sass.
When you have this, you can style the selected row:
li[aria-selected="true"] { border: 2px solid orange }
I want to change the color of the text (link) in a box. This is the CSS code I'm using:
.boxed-1 {
background-color: #e8ecf4;
border: 1px solid grey;
padding: 15px;
margin-top: 1px;
margin-bottom: 10px;
margin-right: 25px;
margin-left: 0px;
}
When I call for div class boxed-1, all the text displays blue. How can I change it?
I've tried a bunch of different suggestions from my google search to no avail.
My site is: http://mikediane.com
Links are set to the color blue by the browser, thus they do not inherit from their parent like most other elements do.
You will need to apply a color: #?????? to the a itself, like this:
.boxed-1 a {
color: #??????;
}
See this JSFiddle for a demonstration.
Typically if you want to set the text in an element just apply the CSS style color.
In your case,
.boxed-1 {
color: /*Whatever color you want*/
}
The problem is that your anchor tag's color is being applied to the text. If you create a rule like
.boxed-1 a { color: #hexcode; }
I'd expect this to work.
I'm currently customising a site with Magento. I installed a wow-slider image slider. It works but it seems to have 2 random dots to the left and also a random space before the shadow.
Please see link
ellamatt.mygostore.co.uk
Please see here and let me know if you have an idea. I would give you the code but there are a few CSS and JS pages that go with this.
PS: it works properly in usual HTML but not in Magento.
The two dots are because of the li elements.
Changing the list-style property to none on this css rule will get rid of them:
Old:
.widget-static-block ul {
list-style: disc outside none;
padding-left: 1.5em;
}
New:
.widget-static-block ul {
list-style: none outside none;
padding-left: 1.5em;
}
And, for the shadow, on the same css rule, add a height of zero and displaying it as inline will get the ul block out of the way and remove the space before the shadow.
Final:
.widget-static-block ul {
display: inline;
height: 0;
list-style: none outside none;
padding: 0;
}
I am trying to do a little optimization on my website and it has brought me to what seems to be a quite common topic but I haven't been able to find a problem quite like mine.
What I had. A image sprite (foggy/clear) and text on top of it. When you hovered over the image it could become clear, when you hovered over the text it would highlight and turn blue. (The image would remain clear)
What I want. To reduce the sprite into one image (rather than two in one), as it is the largest file on my main page and 57% of my load time is spent on images.
What I have done:
1) Gone from a sprite to just one clear image.
2) Created a new 'foggy-img' div container, placed it on top of the image, white with opacity: 0.15
3) Created a new div 'img-text' container for the text to put it outside the 'foggy-img' so the opacity doesn't effect it and have got it nicely place where it should be.
The Problem: It is small, the see-through box has replaced the sprite nicely and works. The text also highlights nicely. But. When one hovers over the text the see-through box becomes 'foggy' again.
Is there any way to keep the 'foggy-box' clear when hovering over the text which is in a separate div?
The HTML:
<div id="photo-feature">
<a href="services.html">
<div id="img">
<div id="photo-fog"></div>
<div id="photo-text"><h3>Learn More...</h3></div>
</div>
</a>
</div>
The CSS:
#photo-feature a { text-decoration: none; }
#photo-feature #img { margin: 4px 5px 0 4px; width: 565px; height: 283px; background: url(images/photo-feature.png) 0 0; }
#photo-feature #img #photo-fog { height: 100%; background-color: #fff; opacity: 0.15; }
#photo-feature #img #photo-fog:hover { opacity: 0; }
#photo-feature #img #photo-text { position: absolute; margin-top: -34px; margin-left: 428px;}
#photo-feature #img #photo-text h3 { float: left; display: inline; color: #fff; }
#photo-feature #img #photo-text h3:hover { color: #0066cc; text-decoration: underline; }
You could use adjacent siblings selector.
(further details)
It doesn't work in older browsers though (guess which).
You would have to swap the ordering of your HTML a bit. Basically put the text first then use something like this:
#photo-text:hover + #photo-fog { // Do something
Right now you'd not be able to set the hover on the H3, but why not just style up the h3 rather than the #photo-text element then it would work fine.
Edit: Beautifully colour co-ordinated js fiddle for you to take a look at: http://jsfiddle.net/will/Gt8KX/
Hope that helps :)