How do I remove the built-in blank space below the header?
The theme is Avada
to remove the built-in blank space below the header you should this css of code:
#main {
padding-top: 0;
}
.header-avada {
margin-bottom: 0;
}
Related
I have a website and want to generate a pdf with the print function. I need to add a footer on all pages.
Only the first page should be without the footer. I already tried the display property which doesn`t work. Do you know a solution?
This is how the footer is set:
.page-footer {
position: fixed;
bottom: 0;
}
// HTML
<footer class="page-footer">
Text for footer
</footer>```
Add another class to home page footer and hide it on print CSS. Along with page-footer class add another class home-page-footer and hide it when printing.
.home-page-footer { display: none; }
You will have to create separate print.css and set css rule for print media
print.css
#page {
/* rules as per your requirement */
size: 190mm 130mm;
margin: 0;
margin-top:10mm;
}
#media print {
.home-page-footer { display: none; }
}
You don't need to set rule for .home-page-footer class in your normal css file. or condition.
I've manage to hide the top bar and menu on wordpress page but white space is being displayed on mobile devices at the top of the page.
https://iroae.com/test
I'm using this CSS
.page .site-header {
display: none;
}
.page .site-top-bar {
display: none;
}
How can I hide this white space on mobile devices?
Edit your style.css link : [https://iroae.com/wp-content/themes/shopkeeper/css/styles.css][css file]
so in your file directory path will be : wp-content/themes/shopkeeper/css/ and file will be style.css
find this:
#page_wrapper.sticky_header {
padding-top: 50px; }
and set padding-top: 0 ;
#page_wrapper.sticky_header {
padding-top: 0; }
I want to change the logo and main menu in the header on this page only:
https://www.maisondefemmes.com/galentines-day/
I've tried updating the css and only managed to edit the search and cart colours.
I've tried using both content and background-image, as well as using logoimg bg--dark rather than #logo but to no avail.
.page-id-3055 #logo {
content: url(https://www.maisondefemmes.com/wp-content/uploads/2019/01/mdf-retina-logo-red.png) !important;
}
I want the logo and main menu to be #b50c3f but they don't budge. I've managed to change Search and Cart.
The Logo is a html img tag and you can't change it that way. The content attribute only works for pseudo elements. One solution would be the following:
.page-id-3055 .logolink > img {
display: none;
}
.page-id-3055 .logolink:before {
display: inline-bloc;
content: url(https://www.maisondefemmes.com/wp-content/uploads/2019/01/mdf-retina-logo-red.png) !important;
width: 100%;
height: 50px;
}
You can detect url with jquery and then change logo and menu by jquery css
if (window.location.href.indexOf("galentines-day") > -1) {
// do something
}
I am playing around with a wordpress site as I'd like to switch from Wix. It is being hosted here: https://globalstudyukbeta2.000webhostapp.com/
I am wondering how I can reduce the space between each section, as there is a lot of empty space. I tried using the CSS editor and looking at the stylesheet but to no avail.
Thanks!
James
Add this css in your active theme style.css
.bg-secondary {
padding: 30px 0;
}
.widget.shapely_home_parallax {
height: 335px;
}
I have created a wordpress single theme, but I am getting confuse with CSS code, where CSS rules should change the display to make menu and image slider revolution look closer.
I would like to reduce the space between the main navigation menu and my revolution slider
This is my website url: http://www.warungrempong.com/
I am trying to use this CSS code:
.admin-bar .nav-container {
min-height: 0;
}
But it's not working as desired and only work when I am using it on my browser dev tools.
When I try to change in my website, nothing happen.
How can I solve this issue?
Thanks.
In the style.css file of your active child theme (or theme), You should add this:
.nav-container {
min-height: inherit !important;
}
When looking at the generated source code of your home page, it seems that your theme is embedding some CSS rules in the html document, as you have this (on line 41 of that source code):
<style id='ebor-style-inline-css' type='text/css'>
nav .pb80 {
padding-bottom: 0px;
padding-top:0px;
}
.pt120 {
padding-top: 0px;
}
.nav-container { /* ==========================> HERE ONE TIME */
min-height: 0;
}
.logo { max-height: 300px; }
.nav-container { /* ======================> HERE ANOTHER TIME
As this is the last instance, it get the priority on first one! */
min-height: 491px;
}
.admin-bar .nav-container {
min-height: 523px;
}
#media all and (max-width: 767px){
.nav-container {
min-height: 366px;
}
.admin-bar .nav-container {
min-height: 398px;
}
}
</style>
So may be you have add this CCS rules yourself somewhere in your theme settings. The best thing, should be to remove that 2 repetitive CSS rules, and your issue should get solved without any need…