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;
}
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 updated my style.css sheet to get rid of a white space at the top of my pages. I know exactly what line of code to edit because when I inspect the page and make changes I can get rid of the white bar. However, when I change this in the style sheet nothing happens. It saves my changes on the style sheet but when I go back to the inspector on the page it hasn't been changed. Is there something I need to do to make sure this change effects the right pages?
This is the section I have changed:
.page_content_wrap
{
padding: 0;
}
This is how it appears on the inspector:
.page_content_wrap
{
padding: 5em 0;
}
Well,you didn't mention about what Html/Css framework you are using. I think your css is getting overrided.Try with this
.page_content_wrap
{
padding: 0 !important;
}
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>
I've been customizing a one-page-design wordpress template (see http://ggc.inductiveplay.com) - it pulls up a floating button on the home page that :should: scroll down to the next section (#menu), but for some reason it keeps pointing to the 3rd section (#location).
I'd like to just override the link in CSS where I'm customizing the button size/appearance and assume I just have bad syntax here:
.a-btn {
padding: 2px 12px !important;
margin-bottom: 5px !important;
opacity: .8;
z-index: 1;
href="#menu";
}
If there's a quick fix for this I'd love to know, otherwise I'd love any insights on where the link is being set/computed on the site.
You can add things before and after a HTML element in css. But you can't change a link using CSS.
The below is bad CSS syntax:
href="#menu";
To add things before something in CSS you can have a HTML element like:
<div class="sample-text"></div>
Then using the following CSS:
.sample-text:before {
content:"blah blah";
}
Instead of "blah blah" you can have something else.
You can't use HTML in the CSS so you can't do what you want, but this is the closest you can get to it.
However you can change links using javascript.
Also you can only use z-index if you specify a position:relative, position:absolute or position:fixed.