I have a Wordpress website and am trying to change the font size of the main menu. From Chrome, When I do an "inspect element" on the page I can see that the menu element is laid out thusly:
.blog-menu a {
font-size: 13px;
}
When I change the font-size to another value from within inspect element, the change is properly displayed on the page. However when I add the code:
.blog-menu a {
font-size: 25px;
}
to my style.css file, the change is not registered. Any thoughts as to what I'm doing wrong? Probably something stupid.
This can often be caused by styles being applied from your cache. To clear your cache and reload the page, pressing CMD/CTRL+Shift+R (Mac OSX and Windows, respectively).
If the new style is still not being applied, it's possible that another style is overriding it. This can be caused by a style being applied after your code, or before your code with the !important tag.
Some questions that may help you figure this out:
What does your environment look like? Is your style.css in a child theme's folder? Is another stylesheet being called after your style.css?
Updated as per comment conversation:
<style type="text/css">
.blog-menu a
{
font-size: 25px !important;
}
</style>
<div class="blog-menu">
<a>This should be 25px</a>
</div>
Related
I am facing header media issues. I don't want that header area on my top of the website. I tried CSS code
.home #wp-custom-header {
display: none;"
}
but it's not working. please check my site for more details hindizone.in
It would be a better solution to change your theme template file so there is no such div container to be hidden. This can normally be found in header.php file of your theme. Delete the div with the class header-bottom.
Another way would be using CSS as you already tried. But you do not have an element with id wp-custom-header so this code is doing nothing. You can find out the right element to target with using the inspector of your browser.
I did this with your code and therefore found the classes you need to address in your css file.
Add following code to your custom css in the theme editor, or inside style.css of your theme:
#site-header.top-header .header-bottom {
display: none !important;
}
With the !important statement you make sure, that the display value is not being overwritten somewhere else in your stylesheet.
#site-header {
display: none;
}
...should work for your site.
For changing colors in some part of a WordPress theme, I've changed the background or color property of those elements (found using inspect in chrome) in style.css. But it is not changing in the theme.
I also tried making child theme of the theme. But no result.
For example, the style.css contains -
#header .nav_bg {
background: #7bae39;
margin-bottom: -30px;
padding: 5px;
}
I've changed it to -
#header .nav_bg {
background: #109DE4;
margin-bottom: -30px;
padding: 5px;
}
N.B: I've tried with SiteOrigin Custom CSS plugins, and it works with that. But I want to do it by changing CSS.
Thanks in Advance.
Use higher selector, element that contains that div or use
!Important before ;
Just add code to custome css in WordPress
If the same selector works with other plugins you might wanna try a few test to try to see what's going on.
Go the page and look for the style you just added on the
inspector. You can see by selecting the element if it is getting
applied and overridden by other css rule. In that case you can
update the rule to be more specific.
If the css is not showing up at all, you can try:
clearing your browser cache
check the page on incognito / a different browser
Hope it helps,
I'm working on an Unbounce project and I can't get the stylesheets to work.
I wanted to change the font-size of the labels of an option on the form. I saw (using inspect element) that the following CSS created affects the size: #lp-pom-form-55 .lp-pom-form-field .option label
So I created a stylesheet in Unbounce like this:
<style>
#lp-pom-form-55 .lp-pom-form-field .option label {
font-size: 16px !important;
}
</style>
And it just doesn't work. I also tried it without the style tag like this:
#lp-pom-form-55 .lp-pom-form-field .option label {
font-size: 16px !important;
}
It still didn't work. I even tried basic things like setting the background color of normal text field id's to black !important with no solution.
What is the correct way to apply styles to Unbounce pages?
I've realized that the code within the <style> tags is the correct way to do it. The problem was that the custom CSS doesn't display in the designer view, it only shows on the live page.
I have a Wordpress page, which I've set up for a friend. It all worked well, but since a few days or weeks the mobile menu (icon) doesn't show anymore. Can anyone find out what this could be?
The page: http://www.cabane-blanche.ch/
put this code in your theme style.css
nav {
font-size: 20px; }
A CSS rule in your themify-customizer.css file is causing the font size to be 0px for everything inside header.
#header { font-size:0px;
}
at line 59. You must remove this rule and it will fix this problem. It is also causing the dropdown item at "WARENKORB" tab to not show up.
If you only want to fix the mobile menu leaving the header rule intact, you can add following code to your style.css, Although I recommend the fix mentioned above instead.
.icon-menu {
font-size: 30px;
}
I am working on a website for a customer creating my own theme for them, but I cant understand why the fonts are not registring it appears to be still in arial or something instead of robot but I have added the google font in my head its bringing the site into wordpress from flat php
Code i used to add robot is
<link href='//fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Roboto:400,300italic,300,100italic,100,900italic,900,700italic,700,500italic,400italic,500' rel='stylesheet' type='text/css'>
wordpress version http://webservices.davidbuckleyni.co.uk/wordpress/?page_id=8
live site
http://www.key2credit.com/
their is also a space above where the banner is im thinking i missing a reset script or something
Edit My bad here is the css showing the font being used for body
However i think its just the text within the main banner thats amiss ie where it says Fast cash loans
body {
padding-top: 120px;
padding-bottom:38px;
font-family: 'Roboto', sans-serif;
background: url("./.fs/img/banner2.jpg") repeat;
}
Edit to show here in head im calling this style sheet to reference the font
/wordpress/wp-content/themes/key2credit/style.css
It sounds like the h2 (and possibly your other header) tag styles are being overridden (as they're showing as inherit (or maybe another parent element it's contained within).
Try to specifically target the text in your banner. Add this to your CSS declaration on line 428 of style.css:
.homeBanner .homeBannerContent {
margin-top: 4%;
height: 315px;
font-family: 'Roboto', sans-serif;
}
Your text issue is quite simply happening because the block of T&Cs is set as position:absolute;bottom;0;left;0; meaning, it will float to the bottom left of it's parent container.
It's parent container is the .homeBannerContent div, which doesn't go down to the bottom of the banner. What I'd do, is take the T&Cs text, outside of the home banner content, and make the main banner div has position:relative;. That should stick it to the bottom left of the banner itself.
Or simply remove the position:absolute;bottom:0;left;0; properties from the CSS of the T&Cs box, and have it display as a standard block.