CSS help - wordpress - css

On this site: https://capetownvegan.com
If you look at the home page, everything is perfect,
Then look at: https://capetownvegan.com/eateries-by-suburb/
You will notice the banner being streched, I add display: none to this.
.has-post-thumbnail .entry-thumbnail {
display: none;
}
It works however it also affects the main page and the first row of blog images do not display., could anyone help figure this out?

The home page always has a class home on the body, and the other pages has the class page on the body. You can use this selector
to specify the css.

Related

Best way to hide WordPress page title

I am completely new to this and am trying to learn on my own. One thing I am having an issue on finding a solution to is how to hide the page title on a WP site. I have read that leaving the page title blank, although solving the issue, may not be good in terms of SEO, so I would like to hide page titles instead.
I have tried using multiple plugins, all with no luck. Additionally, I have tried adding additional CSS code both to hide specific page titles and titles across the entire site.
The code I have been using is
.entry-title {
display: none;
}
and
.page-id-XXX .entry-title {
display: none;
}
None seem to work. Additionally, I tried to see if my theme has an option, and it doesn't.
Is anyone able to let me know what I may be doing wrong and point me in the right direction?
Use the code below to hide header.
.header-page {
display : none;
}
This will work when the header has class .header-page.
This CSS should go inside every page where you want to hide, if its site-wide add it on head.
<style>
.header-page {
display : none;
}
</style>

I migrated WP to another domain and now I get a double navbar

I migrated my WP website to another domain, I am using an animation I made on Animate CC and used and Iframe to placed it. I am working with DIVI and Elementor.
Now, when I click from the animation, I get a double nav bar and I have no idea why. But when I go from the menu, everything is fine.
Does someone know how to fix this? I have tried uninstalling and reinstalling DIVI, elementor and other plugins but nothing works. I have also changed the links of the animation.
This is the website:
https://psychotherapie-couple-famille-lausanne.ch/accueil/
I appreciate any help, thank you in advance.
Because you are loading that page in an iframe.
for example, by clicking an image it opened this page https://psychotherapie-couple-famille-lausanne.ch/therapies/therapie-individuelle/ in iframe.
Edit that page and hide header for that page from divi settings or put this CSS code for that page. you will see custom css option on that page.
div#page-container {
padding-top: 0px !important;
}
header#main-header {
display: none;
}

Wordpress site dropdown menu suddenly stopped working

I've tried searching the forums about this but I can't find something that works in my case.
I'm using elementor with Wordpress and Astra themes. For some reason suddenly the dropdown menu disappears fast when you try and click the menus. The dropdown menu also goes behind the pictures on some of the pages (not the front page). I have not edited anything about the menu and I have no idea how it happened.
Here it shows what I mean with the menu going behind the pictures
It does not do this on the front page.
The website is https://www.onebag.dk/
Does anybody know how I fix this?
The top elementor HTML element...
<div data-elementor-type="product-archive" data-elementor-id="589"
class="elementor elementor-589 elementor-location-archive product" data-
elementor-settings="[]">
... is positioned relatively but has no z-index set.
If you set the z-index below 9999 (the index of the submenu) it works. I think you can use this css in the custom css section of your theme:
div.elementor {
z-index: 99;
}
Maybe this is a bug in the theme, or it is a conflict between theme and a plugin.
I used this custom CSS to fix the problem:
#masthead {
z-index:99999
}
#content {
z-index: 0;
}
Basicly, made index of header higher than contents index and worked.

How to show sticky menu in all other pages except home page in wordpress

I would like to show sticky menu in all other pages except home page . How can I do that ? Please help Please see my site here
You can hide sticky header using css
.page-id-94 .is-sticky {
display: none;
}
Page ID - .page-id-9 -> It is unique to front page that you are using.
I hope this will help you.
Try this
.home #Top_bar.is-sticky{
position: relative !important;
}
It's better to use .home class instead of .page-id-XXX since there is a possibility the homepage may change id.

Some modules moving down on my website when I click on the menu? Why?

I can't manage to understand what's wrong with my website, if it's something with CSS or something else. When I go to the home page http://www.nomadtravellers.com/
the layout is correct. But when clicking on any other menu, as in example "About Us" some of the modules (Photo moasaic, breadcrumbs, etc.) are moving slightly down, while some other are staying in the correct position. Any suggestion on how to fix it?
It is build with joomla 2.5.11 if that matters.
I've already tried to deactivate Css optimization, and it's still the same behaviour
you have different styles for main and inner pages. on main page css there's a reset rule for form (the search field form in your header):
form {
margin: 0;
padding: 0;
}
on inner pages:
form {
margin-bottom: 18px;
}

Resources