I have 2 sets of menu items in my navigation bar.
Set 1 is labelled ".homemenuitem"
Set 2 is labelled ".othermenuitem"
I want to display homemenuitems on the home page and othermenuitems on every other page.
I was hoping to do this with CSS.
I started with the following
.home .othermenuitem {
display: none;
}
Which shows the correct menu on the home page, but I can't figure out how to hide the homemenuitems on every other page without using the unique page id (which will be a pain as the site grows).
Any help would be greatly appreciated.
Thanks
This is where the 'Cascading' part of 'Cascading Style Sheets' is your friend. More specific rules always override less specific ones, so if you do this:
.homemenuitems {
display: none;
}
.home .homemenuitems {
display: block; /* or 'inline' or 'inline-block', as necessary */
}
then the latter rule will override the former where it matches (on the home page), and otherwise, the first rule will always take effect.
Can you take the other way, making:
.homemenuitem {
display: none;
}
In every single page of your web, and only showing it on the home page id?
Thanks Michael, tweaked it a bit further and this is what worked for me, if anybody is looking for a similar situation.
.homemenuitem {
display: none;
}
.home .othermenuitem {
display: none;
}
.home .homemenuitem {
display: inline-block;
}
i have tried it on so many occasion , you can use this code .homemenuitem { display: none; } .home .othermenuitem { display: none; } .home .homemenuitem { display: inline-block; }
Related
With CSS in additional CSS in WordPress, I'm trying to hide a form from three of the landing pages. Adding CSS as
body.page-id-4077 .bg-tan-darker.color-white-base {
display: none;
}
works while doing something like below doesn't.
body.page-id-4077 .bg-tan-darker.color-white-base, body.page-id-4082 .bg-tan-darker.color-white-base, body.page-id-4086 .bg-tan-darker.color-white-base, {
display: none;
}
Please advise me as to what the correct way is that I need to follow to include CSS for multiple pages as above.
Remove the last comma from your code:
body.page-id-4077 .bg-tan-darker.color-white-base,
body.page-id-4082 .bg-tan-darker.color-white-base,
body.page-id-4086 .bg-tan-darker.color-white-base {
display: none;
}
I am trying to hide the element .gdlr-page-title-wrapper on the home page of https://colerainefc.com - a WordPress site.
I have tried: .home #gdlr-page-title-wrapper { display: none; }
Any idea what I am doing wrong please?
Its a class, not ID, so dont use # but .
.home .gdlr-page-title-wrapper { display: none; }
I've tried doing things like .page-id-1122 #different-elements-i-saw-in-chrome-inspector-here { display: none; } without any luck.
Can anyone tell me how I'd accomplish this? Thank you in advance.
Just get your header id and go to your style css, add this code
body.product-template-default.single.single-product.woocommerce.woocommerce-page.customize-support .header-area {
display: none;
}
Here .header-area will be your header class/id.
Try this:
.page-id-1122 #different-elements-i-saw-in-chrome-inspector-here { display: none !important; visibility: hidden !important; }
I've been trying to hide everything apart from the main content on the following Facebook post
I've been injecting the following css without luck - can someone please help?
html body * {
display:none;
}
#contentArea {
display:block;
}
Below is a screenshot of what I'm after.
With body * you are hiding every child.
With #contentArea you are showing this block, but still - body * persist for child elements AND parent elements.
You have to specify much more rules to hide everything else.
As mentioned before, you cannot display an element which has a parent that was hidden. Anyway, Facebook's layout is simpler than I thought, all you have to do is hide two elements: the header and sidebar. This of course assumes that a user is not logged in.
Inject this CSS
#pagelet_bluebar, #rightCol {
visibility: hidden;
}
Result:
Result (user logged in):
To hide the chat sidebar, you can add #pagelet_sidebar to the CSS.
#pagelet_bluebar, #rightCol, #pagelet_sidebar {
visibility: hidden;
}
To conclude: Hide the main parts instead of everything, or use jQuery to target all except your element as suggested by #MaVRoSCy.
Thanks everyone - the following seems to be the combination of everyone's answers:
#leftCol, #pagelet_bluebar, #rightCol, #pagelet_bluebar {
visibility: hidden !important;
display: none !important;
}
html ._5vb_.hasLeftCol #contentCol {
border-left: initial !important;
margin-left: initial !important;
padding-left: initial !important;
padding-top: initial !important;
}
._5vb_, ._5vb_ #contentCol {
background: none !important;
}
I am using a edit CSS extension from the slim jetpack plugin for my wordpress project. Unfortunately it is placed on the internal server so I cant share the link with you.
The issue: I have a round 30 sub-menus to present under the menu on the header. Decided that the best way would be to use custom CSS to edit that specific menu instead of changing all the menus look.
So i followed the guide presented here:
added the sub-menu-columns as a custom CSS class on the desired menu
and added this to my CSS file:
.sub-menu {
width: 410px;
}
.sub-menu-columns ul.sub-menu li {
display: inline-block;
float: left;
width: 200px;
}
.sub-menu-columns ul.sub-menu li:nth-child(odd) {
float: left;
margin-right: 10px;
}
.sub-menu-columns ul.sub-menu li:nth-child(even) {
float: right;
}
I am ended up with all the sub menus being 410px wide (instead of original 184px). And the sub-menus in the desired place are still in one column but simply have spaces on right and left sides.
I am new to CSS but it seems that the first .sub-menu declaration is wrongly placed here as it affects all the sub-menus. As well i am struggling to get 2 sub-menu items on the same row.
I kinda understand where are the "legs" growing from but it seems i am missing something here.
I searched for the similar cases but could not find clear explanations on this subject.
Would appreciate any help.
After some research i found that a
.sub-menu class
had clear: both; defined that caused the issues.
This the code i ended up which worked perfectly fine:
.sub-menu-columns ul.sub-menu li {
clear: initial;
float: left;
width: 50%;
}
Just in case someone comes here looking for a similar solution, here is what worked for me, on WordPress 5.7, theme Chaplin:
#media (min-width: 999px) {
.submenu-columns>ul {
width:50rem;
}
.submenu-columns>ul>li {
width:50%;
float:left;
}
.submenu-columns>ul>li a {
width:100%;
}
.submenu-columns.odd>ul>li:last-child {
width:100%;
}
}