I'm using flexnav for a top menu bar and I can't seem to change the color of anything. I'd like to have a different background color, but no matter what I change in the css the appearance of the flexnav bar stays the same. It's a pretty generic grey-black with a darker black for hover items. I've changed the color setting for the menu buttons, the border, etc. but nothing seems to make a difference.
Is there some js that is overwriting the css maybe? I can't find the problem.
Related
Steps done to encounter this issue
I have an element with a blue background, then if I hover it, the background color turns black.
When I Copy the text inside of that element, and paste it also on that element, it creates another span with a background color of black which is the background color when hovering.
Is there a way not to include that hover style when pasting?
I've read the documentation but it doesn't give any help about this, or I just missed or didn't understand all the documentation
On my site, I have a sticky navbar that is always positioned at the top of my site, so even as you scroll down, it's still visible.
It's also transparent, and just contains some black text.
The problem is that on my page, there are several divs with varying background colors. So as I scroll down the page, the text in the nav looks fine as I overlay divs with lighter backgrounds, but it's really hard to read on darker ones.
I figure I have two options:
Change the nav text color based on if I'm overlaying a div with class "dark"
Change the nav text color based on the background color of the div beneath it.
Are either of these possible? Or is there another option I'm not aware of?
I just read about Midnight.js, a jQuery plugin that allows you to use data-attributes on the elements you scroll over to define how your navigation should look. Might be worth to give it a look.
Check out jQuery Waypoints. It's perfect for your problem. You can specify exact waypoints so that the moment a differently colored div hits your menubar, an event is fired. and in that event you can change the menubar color. And then you'd have another waypoint at the bottom of that div so you could reset the color.
http://imakewebthings.com/jquery-waypoints/
I'm looking to create an effect similar to this: https://www.livestrong.org/donation/
I'm just wondering what ways there are to place images/buttons over top of a background. Would I just do a class/div with a background and then put the buttons within this div? I'm not sure if it's that simple but I'd like to make sure I'm on the right track before I delve into this.
You you're on the right track.You can use$('#secondDiv').insertBefore('#firstDiv');,assuming you know JS.I'm sure theres a way through CSS, but it probably won't be the best choice. And you can use :active and :hover via CSS for the actual buttons if you try to create that. So when the user hovers on it it'll turn into a light grey, then when they click on it, it'll to a yellow color. Here's an example
#firstbutton:active{
background:#009dff
}
#firstbutton:hover{
background:#0148A0
}
I created a new theme with the query theme roller. However, I can't seem to figure out how it is setting the checkbox color when it is not selected.
If you look closely you can see that the box is there with a slightly darker color. The theme roller or JQM itself, seems to create a darker or lighter shade than the main area. I've tried searching for that color in the downloaded theme, looked at the applied styles, etc but I can't figure out how this gets set or how I can change it to be either a little darker or a little lighter.
Here is the theme roller link if you want to download the them for yourself:
http://themeroller.jquerymobile.com/?ver=1.4.2&style_id=20140322-33
If you set the following it should fix your issue:
.ui-btn.ui-checkbox-off:after{
background:#fff;
opacity:1;
}
By default the opacity was was on:
.ui-checkbox-off:after, .ui-btn.ui-radio-off:after
And the color was set on:
.ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after
Hope that helps.
I'm working on a Joomla template, I've changed the top level menu colors to match our logo but I'm having trouble locating where the change in color is coming from when you mouse over the dropdown menu. I set the top level menu item to hover using firebug so it stays open though when I inspect the drop down elements I cannot see from where the color change is coming from. I've set hover states on each subsequent div and li and that did not trigger the change in color so I'm baffled as to where the color change comes from. This is the webpage I'm working on http://www.webchild.com.au/search-results
I think it your case menu backgroud color is an image located here:
http://www.webchild.com.au/templates/yoo_mellow_July2012_Wider/css/variations/../../images/variations/bluegrey/menu_level1_item.png
You have a Javascript updating the color for the class hover-box1, check that...