I have issue with setting menu text and icons in sticky header to be black, in my site. I searched for right class, but cant find it into CSS styles. I tryed this CSS:
.header-wrapper .stuck {
color: #000 !important;
}
but not make any changes. So how to make text and icons in sticky header black ?
According to the website you've given, you just need to do remove the class named .nav-dark from the div having id #masthead when scrolled (or .stuck class is added with .header-wrapper).
Include jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Use jQuery:
function customizeHeader() {
var window_top = $(window).scrollTop();
if ($('.header-wrapper').hasClass('stuck')) {
$('#masthead').removeClass('nav-dark');
} else {
$('#masthead').addClass('nav-dark');
}
}
$(function() {
$(window).scroll(customizeHeader);
customizeHeader();
});
You'll get something like:
Hope this is what you're trying to achieve and it helps!
Related
Yesterday I decided to try Polymer 1.0 and I'm already facing difficulties when trying to styling the paper-toolbar.
The documentation says that the background colour can be changed by using:
--paper-toolbar-background
But how can I use it on CSS?
I tried the following:
paper-toolbar {
--paper-toolbar-background: #e5e5e5;
}
Also this:
paper-toolbar {
--paper-toolbar {
background: #e5e5e5;
}
}
But neither worked. What is the correct way to do it?
Thanks.
If you are styling it on your main page, then you have to apply styles using <style is='custom-style'>. This is to make Custom CSS Properties work.
Applying is relatively easy. paper-toolbar provides 2 custom properties and one mixin. --paper-toolbar-background is a property that changes the background color of the toolbar while --paper-toolbar-color changes its foreground color. --paper-toolbar is a mixin applied to the toolbar.
To use these properties is just the same as applying styles in your elements. As an example
<style is="custom-style">
paper-toolbar {
--paper-toolbar-background: #00f; /* changes the background to blue*/
--paper-toolbar-color: #0f0; /* changes the foreground color to green */
--paper-toolbar: {
font-size: 40px; /* Change default font size */
}; /* Notice the semicolon here */
}
</style>
I couldn't find a solution to this problem either until recently. I have two toolbars and I didn't want to change the CSS for all toolbars just the header toolbar.
To change the CSS for every toolbar, in your external css file add the following:
paper-toolbar.paper-toolbar-0 {
background: orange;
color: red;
}
However, that doesn't address the problem. To change a single paper toolbar based on a class like the following:
<paper-toolbar class="header">
...
</paper-toolbar>
The above uses the class called "header" so in my CSS I added:
paper-toolbar.header {
background: orange;
color: red;
}
... and it worked! Yay! That means with this you should be able to override any CSS of any of the other elements doing the same thing. This is completely untested but I think it should work like:
<elementName>.<classname> {
...
}
Hope this all helps!
I am using headroom.js to hide my header when scrolling down and make my header section visible again when scrolling up. The header section contains my logo and navigation buttons.
While at the top of my page I need my navigation buttons to be a darker color because my background color is a lighter, and when scrolling down i need my navigation buttons to be a lighter color because the header background color is darker.
I have created colors classes in CSS to change the button colors.
CSS:
.topColor {color: red;}
.scrollColor {color: white;}
I'm using angularjs for this project, so i'm using headroom.js angular module and the option below.
angular:
<headroom id="header" tolerance="5" offset="205" classes='{"initial":"animated","pinned":"swingInX","unpinned":"swingOutX","top":"headroom--top","notTop":"headroom--not-top"}' >
In an attempt to accomplish the task of changing my navigation buttons, I tried two different approaches.
1.) Created a directive to check if headroom hasClas('headroom--not-top') and if it did add class ('.scrollColor') to my navigation buttons ('#navColor') otherwise add class ('.topColor').
.directive('headroom', function(){
return{
restrict:'E',
link: function(scope, element, attrs){
if($(element).hasClass('headroom--not-top'))
{
$('#navColor').addClass('.scrollColor');
}else{
$('#navColor').addClass('.topColor');
}
}
}
});
2.) I then tried this approach...
.directive('headroom', function(){
return{
restrict:'E',
link: function(scope, element, attrs){
if($(element).hasClass('headroom--not-top'))
{
$scope.myNavColor = "scrollColor";
}else{
$scope.myNavColor = "topColor";
}
}
}
});
nav in html
<li><a id="navColor" ng-class="{current: isCurrentPath('/')}" active class = "{{myNavColor}}" ng-href="#/">Home</a></li>
Neither attempt worked for me, however the first attempt did change the button white, but when i scrolled down it did not change. I believe the problem is $(element) is not being recognized, or am I just approaching this task completely wrong?
I found a solution for this "issue" using CSS! headroom.js uses two classes to detect when the header is at top the page and when it's scrolling (not a the top), so I provided the following CSS.
header.headroom--not-top ul li a{
color: red;
}
header.headroom--top ul li a{
color: white;
}
In my case (using nav class from bootstrap):
nav.headroom--not-top { color: red; background-color: lightgrey; opacity: .8 }
nav.headroom--top { color: white }
It work, but the ideal situation would be that the color was a complementary color from the background color when the nabber descend.. Isn't?. Maybe in jQuery...
I'm auditioning for a new website, using Wordpress. Shifted the primary navigation above the header image, and let the transparent color.
After spending the navigation monitor window with the contents of the site, I want it to change to black. To better understand the test site is this: http://new.blogchampz.com/
How do I do that? I know that includes CSS and JS ...
All you need to do is to track the scroll position. Once the header hides from the viewport, then you must add an additional class for the header menu with a background color of black.
CSS:
.darkMenu {
background-color: #000;
}
JS:
$(window).scroll(function(){
var headerHeight = HEIGHT OF HEADER;
if($(document).scrollTop() > headerHeight){
$('MENU SELECTOR').addClass('darkMenu');
}
else{
$('MENU SELECTOR').removeClass('darkMenu');
}
});
UPDATE
Add the following css in your stylesheet,
CSS:
.masthead-fixed .site-header {
background-color: #000 !important;
}
I have installed Wordpress 3.6.1, and theGrid Retina Ready One-Page Wordpress Theme.
I have created two CSS classes "redback" and "greenback" in my theme, within Wordpress Dashboard, for my top-menu, in order to place on the right respectively the "ESPAÑOL" and "FRANÇAIS" buttons, as you can see on the website: Website
I have settled all the mediaqueries files in order to adapt the website menu to the different sizes of the screens. And it works, except for the screen below width of 767px (on mobile phones).
The two words "ESPAÑOL" and "FRANÇAIS" don't line-up vertically with the other.
I have tried many solutions, but nothing works.
If I change the CSS classes "redback" and "greenback" to adapt it to the screen, then they don't match with the screen above width of 767px.
And if I put the CSS classes in my media-queries file in each category size of screen, nothing seems to work.
Have you any recommendations for it?
I thank you in advance, any help is appreciated.
I played with this in chromes dev tools and I think if you "reset" your two classes things will line up perfectly. So for example you could do:
.redback, .greenback {
padding: inherit
margin: inherit
etc.
}
Kinda dirty though.
You could also just javascript the classes away at that screen size and just let them inherit the properties with the rest of the li's.
I am not a JS/jQuery expert by any means. In fact I know very little but based on this post I put this together in a CodePen.
You just need to plug in your id's and class names where appropriate.
HTML
<p id="foo" class="blue">Color</p>
CSS
p {
font-size: 3em;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
.blue {
color: blue;
}
.red {
color: red;
}
jQuery
$(window).resize(function(){
var width = $(window).width();
if(width < 767) {
$('#foo').removeClass('blue').addClass('red');
}
else {
$('#foo').removeClass('red').addClass('blue');
}
}).resize();
Ok, I have tried the first method, but indeed, it's a little dirty. I want to try the second method, from javascript, but I am totally new to this. However, I have found the following code where I can change my CSS classes:
jQuery(document).ready(function(){
jQuery('#nav-button').click(function() {
jQuery('#options li').toggle();
});
if ( jQuery(window).width() < 767) {
jQuery('#options li a').click(function() {
jQuery('#options li').hide();
});
}
jQuery(window).resize(function() {
if ( jQuery(window).width() < 767) {
jQuery('#options li a').click(function() {
jQuery('#options li').hide();
});
}
});
jQuery(window).resize(function() {
if ( jQuery(window).width() > 767) {
jQuery('#options li').show();
jQuery('#options li a').click(function() {
jQuery('#options li').show();
});
}
});
});
But I don't know how to change it in order to apply what you have tell me before. (I only want to cut all the padding from the css classes "redback" and "greenback" off for the width < 767).
I have the following code:
<div style="" class="skiptranslate">
<iframe frameborder="0" style="visibility:visible"
src="javascript:''"
class="goog-te-banner-frame skiptranslate"
id=":2.container"></iframe>
</div>
I need to hide it but if I only hide the goog-te-banner-frame using:
.goog-te-banner-frame {
display:none !important
}
It still throws my header down. If I use this:
.skiptranslate {
display:none !important
}
It also hides the language selection dropdown because it shares the same class.
I'd like to hide the skiptranslate div that CONTAINS the goog-te-banner-frame.
How do I do that?
Edit:
This is actual code to "create" the translate div above:
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
autoDisplay: false,
includedLanguages: ''}, 'google_translate_element');}
</script>
<script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Ok, this works for some reason:
.goog-te-banner-frame.skiptranslate {
display: none !important;
}
body {
top: 0px !important;
}
The selected answer is wrong!
I know this is an old question, but for anyone coming across this problem in the future, the easiest way:
body > .skiptranslate {
display: none;
}
Since the iframes are dynamically added directly to the body, you can simply select only direct descendants and nothing deeper.
This works for me:
.goog-te-banner-frame.skiptranslate {
display: none !important;
}
body {
top: 0px !important;
}
Why don't you just add an id to the skiptranslate div that holds the goog-te-banner-frame? <div id="something" class="skiptranslate" style=""> will then allow you to style div#something { display: none !important; }
Try to add another class, say .myClass {display: none;}, append to skiptranslate, like class="skiptranslate myClass"
EDIT:
Another solution:
You can also wrap the google translate code with another div, say <div id="google-wrapper">... google translate code...</div> and then style the wrapper with display: none;
OR
See this fiddle: http://jsfiddle.net/SryPD/
I found this to work the best for me. I send the Google Translate "origninal text" tooltip to z-index: -1000. So it is still in the page, but out of sight.
// Force hiding of "original text" popup for menus, etc. (very annoying)
jQuery(selector).bind(
"mouseenter mouseleave",
function (event) {
if (event.type === 'mouseenter') { google_trans_tt.css('z-index', -1000); }
else { google_trans_tt.css('z-index', 1000); }
}
);
October 2022: None of the above answers worked in my case.
I made it work by simply changing the z-index: of my website's menus, after I found the z-index: of the google translate's iframe (using of course the Developers Tools).
It works for me.
.goog-te-gadget img{
display:none !important;
}
body > .skiptranslate {
display: none;
}
body {
top: 0px !important;
}