I have the following page - and the header links, such as "Our Tours" and "Pick Up Points" are not linkable and I dont understand why. Can someone please help me understand why this wont work correctly.
https://www.comparestonehengetours.com/tour/categories.php?path=Day+Tours
Such as source text...
<li onclick="document.location='https://www.comparestonehengetours.com/pick_up.php'">
<a>Pick Up Points</a>
</li>
Thanks!
The div with class .site-content.large-centered is over your menu.So in that page the click is on that div instead of the menu.When you inspect the page you can see that.
#media only screen and (min-width: 64.063em).column.large-centered, .columns.large-centered {
margin-left: auto;
margin-right: auto;
float: none;}
remove the float none and you can click the menu.And also remove the javascript for menu linking put the links directly.thats good
Related
We have a weird issue with our SVG icons in our mobile menu. They appear very big in the mobile version although they are set at 1.6em.
Go here, open the hamburger menu and click on the "Shop Now" Dropdown, you will see the size of the icons
We tried the following CSS in the WordPress Customizer but it seems like it's not that class, and that's weird because using the Chrome Developer Tools if we modify that class it seems to change.
.sidr-class-icon sidr-class-before sidr-class-svg {
max-width: 15%;
}
Note: Using !important tag also doesn't work.
The class of this image is class='sidr-class-icon sidr-class-before sidr-class-svg'. So to select it in css you need to use:
.sidr-class-icon.sidr-class-before.sidr-class-svg { ... }
And not:
.sidr-class-icon sidr-class-before sidr-class-svg { ... }
.sidr-class-icon.sidr-class-before.sidr-class-svg {
max-width: 15%;
border: solid red 3px;
}
<img src="https://www.safe-company.com/wp-content/uploads/2020/08/bmeeting.svg" class="sidr-class-icon sidr-class-before sidr-class-svg" aria-hidden="true">
Try setting height and width attributes for your img tags.
I basically wanted to know how I could remove the button in the top right of this website . I could not find the actual button within the CSS of the website, so I will have to result to this. Anyone has an idea?
add this css to hide it
#genesisexpo_button_5dca4f5d12381 {
display: none;
}
if you need to hide it on home page only please add bellow code
.home #genesisexpo_button_5dca4f5d12381 {
display:none;
}
.home .header_button .genesisexpo_module_button a {
display: none;
}
can try this , this is only to hide on home page
I am trying to hide the header and footer from a specific page on my website. I am using a theme I downloaded online. The specific page I am trying to hide is http://ai-home.com/dsme/
I installed a custom CSS plugin so that I can customize the CSS on this page. I inspected the page element and can see that I am most likely trying to hide the
div id="header-space" and div id="footer-outer"
After reading online I think the code should be
.page-id-5321 .site-header, .page-id-5321 .site-footer {
display: none;
}
or
.page-id-5321 .site-header-space, .page-id-5321 .footer-outer {
display: none;
}
When I publish, I do not see any changes to the page. I am not a developer so I want to make this edit as easily as possible without it affecting the rest of my website.
EDIT:
tried some suggestions and was able to fix most of the problem, but now I am stuck with a big grey bar on the bottom but I can't find it via inspect element.
EDIT#2: So the CSS looks like this right now, but still stuck with a grey bar on the bottom
#header-outer { display: none;}
#header-space { display: none;}
#footer-outer { display: none;}
Use the visibility property as hidden.
Like [ visibility:hidden ]
In your header class/id.
Please try below code for removing header-outer, header-space and footer-outer
.page-id-5321 #header-outer, .page-id-5321 #header-space, .page-id-5321 #footer-outer {
display: none;
}
I think if you use wordpress, in your specific page can use other header or/and other footer.
Change
get_header();
to
get_header('<other header file>');
same with footer
Try it
<div id="header-space" class="hide">xyz</div> and <div class="show" id="footer-outer">abc</div>
csscode:
.hide{display:none;}
.show{display:block;}
If you need to hide a block/section then just add class:hide to HTML OR for showing use class name show like mention above.
Hope it will work. Revert if it is not.
For grey bar solution
#footer-outer #copyright, body {
border: none!important;
background-color: #f8f8f8!important;
}
By changing the color of footer you can use the same background.
Does Display: none on duplicate content affect SEO/Semantics?
Suppose you're building a mobile-first, responsive site. At smaller breakpoints, you've opted to show your page's heading tagline (<h1>) in the main hero banner. However, later, you'd like to display a company logo in that same spot, and display your tagline in a sub banner. For example:
<!-- Assuming following markup -->
<header class="hero-banner">
<h1 class="hide-on-lg">Company Tagline</h1>
<img src="..." class="show-on-lg" />
</header>
<div class="subhead-banner">
<h1 class="show-on-lg">Company Tagline</h1>
</div>
...with the following CSS:
.hide-on-lg {
display: block;
}
.show-on-lg {
display: none;
}
#media (min-width: 1200px) {
.show-on-lg {
display: block;
}
.hide-on-lg {
display: none;
}
}
The semantic rule is that you should never have more than a single h1 on a page, so my question is this:
Does having that duplicate content affect SEO, or violate semantics, if only one variation is ever actually visible?
Google crawls CSS ‘display:none’ Content, so it is duplicate content.
More info here
http://seoshrugged.com/2014/07/13/does-google-crawl-css-displaynone-content/
Yes, apparently it will adversely affect SEO; Google does take into account CSS being used to render a page (black text on a black background, etc..). Additionally, it is indicated there should only be one H1 tag per page, etc... A better way to still have relative 'dynamic' functionality in your case might be to use a combination of your media queries (bootstrap?) and jquery and change the style and position of it dynamically without necessarily calling them both an H1.
I have a page with a left sidebar that I want to be able to toggle on or off based on whether or not the user clicks it. Unfortunately entering JavaScript code on this website has been disabled and I only have access to CSS.
The left sidebar has
its main div (parentBlock)
a div for the show/hide, (toggleBlock)
a div for the logo, (div1)
a div for the navbar, and (div2)
a div for social icons (div2)
When the user clicks on "Show / Hide" I want to:
Hide (display:none) the logo, navbar, and social div's, and
Set the height of the main div to something smaller (say 30px).
Is there any way to do this in CSS?
<div class="parentBlock">
<div class="toggleBlock">Show / Hide</div>
<div class="divBlah">div1</div>
<div class="divBlah">div2</div>
<div class="divBlah">div3</div>
</div>
Then if the user clicks "Show / Hide" again, it will unhide the div's and set the height back to filling the screen.
Is this possible?
I found some code that would work if the "Show / Hide" button was in "parentBlock" but it didn't work if it was within "toggleBlock" (and I have to have the Show/Hide button in toggleBlock)
(http://tympanus.net/codrops/2012/12/17/css-click-events/)
I realize onClick events require JavaScript. Those are not possible since I can't use JavaScript :( Some people try to get around it by using either :active or creating checkboxes and having the checkbox:clicked value load the action ... but it only works with certain relations that I can't seem to nail down.
Unfortunately I cannot alter the ultimate structure of "toggleBlock", div1, div2, and div3 ... only what's in them and their CSS. Also making it even more difficult is that the website randomly generates ID="" each time the page loads so the TARGET method isn't possible. Also, the 3 div's (div1 thru div3) have the same class name. I'm beginning to think it's impossible :(
(For reference, I'm trying to use the tools on the New SmugMug and they're rather restrictive)
Here is a CSS only solution using target
DEMO http://jsfiddle.net/kevinPHPkevin/r4AQd/
.button {
display: block;
width:60px;
background: red;
z-index:1;
}
#element {
display: none;
background:#fff;
margin-top:-20px;
z-index:2;
}
#element:target {
display: block;
}
#show:target {
display: block;
}
#hide {
background: #000;
color: #fff;
}
As Joum has pointed out this is not possible to do via click events but using hover on siblings you might be able to achieve a similar effect. for example try adding this css:
div.toggleBlock { display: block; }
div.toggleBlock ~ div { display: none; }
div.toggleBlock:hover ~ div { display: block; }
for more information see this: http://css-tricks.com/child-and-sibling-selectors/