Im working on a website that has header(top), slider(middle) and footer(bottom). On my first slide i have a logo showing so i'm wondring if it's possible to hide logo on my header when my slider is on first slide, but only hidden on first slide and when i'm on other slides that a logo still shows on a header.
I'm using a slider "Swiper" if that helps.
Link to a website is:
http://raumfuerkunsttherapie.de/FW/
Any help will be much appreciated!
Thank you in advance :)
Yes, you can using the nth-selector property of CSS. Each slide inside your slider has a common class swiper-slide so you can target the logo image inside the first slide like this and then hide it using display: none;:
.swiper-slide:first-child .row .u-max-full-width {
display: none;
}
Using the above CSS will hide the logo image on the first slide but it'll appear on the rest of the slides.
Related
I am trying to set up a WooCommerce site (https://storetest.rigwald.com/?cmp_bypass=test), which uses a product slider based on prettyPhoto.js. The problem is that the images are not centered in the middle of the slider, they are displayed to the left slide of the slider canvas/window. Is there a way to force the images to be centered in the slider? The theme creators appear to have no concept of their own product, simply telling me to change the image size for any products shown in the slider to 800x512, even though product photos are supposed to be 600x600 or 800x800. They are just attempting to have me fill the slider "canvas", so the off-center images aren't noticable.
I am not a coder. I can poke around Chrome developer tools and the theme editor in Woocommerce/Wordpress, which is how I found out the slider is using prettyPhoto.
Thank you for your help with this!
Looking at your theme it seems that all you need is some css to fix the problem.
I have created an action that inserts some inline style that should help with that issue.
add_action('wp_head', 'bt_custom_inline_style');
function bt_custom_inline_style () {
?>
<style>
.big-slider .home-slider li {
display: flex;
justify-content: center;
}
</style>
<?php
}
You can copy paste this code to your functions.php file
I am trying to get focus on a specific div on click of an anchor link.
Here is the code
Link
I am facing a problem that the view is rendered from different partial views like header footer etc.
The header contains the link to a particular div from another view and it has a sticky navbar. When I click the link on nav bar it does focus on the div. But some part of div hides behind the header navbar.
Which looks clumsy according to the UI perspective.
Here is the navbar code:
<nav><li>Link</li></nav>
The example code for page div could be something like
<div id="divname">Some Content</div>
Please give me a clue how can I get the div to show just beneath the sticky menu bar.
Try with giving some margin-top to the div you want to focus on clicking, so that, the navbar will not hide your div and then change your href from
href="somepage.html#divname"
to
href="#divname"
only. Always give unique ids or classes to the elements in HTML so that the machine will not get confused between them and treat two different elements the same way. Hope this will work for you. If not post a response for help.
There's plenty of questions like this one on StackOverflow. Try this one for example:
https://stackoverflow.com/a/59380086/1973005
You can add a pseudo-element (::before) to the linked element in CSS, using the following settings. This creates an invisible block above the linked element which again creates an offset for the linked element position, since the top of that pseudo-element will actually be the position of the link anchor.
.anchor_offset::before {
display: block;
content: ' ';
height: 10em; // Whatever height your navbar is
margin-top: -10em; // Whatever height your navbar is
width: 100%;
visibility: hidden;
}
<div id="divname" class="anchor_offset">Some Content</div>
The navigationlink "Leistungen" (marked black in below image) is linking to an anchor where you can find an carousel-slider. The submenu is doing the same + firing the function to slide to the relating carousel-slide.
Beglaubigungen
But out of some reason if you load the following site and try it, its jumping too far (following image): https://bm-translations.de/
The strange thing is, if you then click a 2nd time the same navigation link, it is jumping to the right anchor.
Why is this happening and how to solve this?
In your page, after clicking that menu link, it scrolls down to where that section is in the document.
It's scrolling down to a block element (I assume some JS script is smooth scrolling it to the ID):
<div class="row" id="leistungen"></div>
In your H2 element directly inside of that div, you have your heading with some padding on top:
<h2 style="text-align:center;font-size:24px;padding-top:30px">Leistungen Ihres Übersetzungsbüros</h2>
If you added that padding yourself, go ahead and increase that to 90px (or whatever amount you want).
Or else just add this to the bottom of your css file:
#leistungen > h2 { padding-top: 90px; }
The only alternative is to edit the JS that's creating the smooth scrolling feature.
EDIT: I'd even recommend streamlining your H2 padding in css, not on the page... each of your H2's have their own unique padding-top.
Before:
After:
Found a Solution:
<a onclick="document.getElementById("carousel-selector-1").click();location="https://bm-translations.de/#leistungen"">Beglaubigungen</a>
The code I'm using for previous and next buttons in carousel is as follows:
COde screenshot is here
But I'm having a problem of different background color near those button as shown in the screenshot I've attached:
<\a>
Could anyone please me removing those grey background. Please let me know the alternatives I can use also.
Set the carousel left and right classes background images to none! Your problem will be solved!
Just set the background-image property to none.
.carousel-control.left, .carousel-control.right {
background-image: none!important;
}
I have a header but I am stuck at 2 things.
How do I get it all positioned properly? What I want is it to be positioned as a header with a navbar at the bottom of it, then in that navbar I want a div that I can make slide around and I want x amount of tabs.
How would I make the div slide left/right using JavaScript/JQuery? Sorry if it doesn't make sense.
My code is:
<body>
<div class="header">
<div id="topHeader"> </div>
<div class="navBar">
//buttons/text here
<div id="slider"> </div>
</div>
</div>
</body>
I have tried using positioning (absolute/relative) but when I make the navBar relative it doesn't stay at the bottom but if I make both it and the slider absolute, the slider doesn't stay in the navBar. Is there any other way to accomplish it?
I am not able to understand how to make it work. However, here it goes.
The css for header would be:
.header {
display: block; // for that overall div..
}
Then you are having a top header, that would be more like a top header under which you want the nav bar. Ok for that you said you want it to be as header. Then just write it the way it is! And it will be used as a header, I mean just add some margins and paddings so that it has some distance from other objects.
#topHeader {
margin: 5px; // overall 5px pixel for all sides.
padding: 2px; // 2 pixel padding..
}
The nav bar, was the one with may buttons and texts that you will be using as hyperlinks to other pages. Right? So try using something like this:
<ul>
<li>First text</li>
<li>Second text</li>
<li>Third text</li>
</ul>
Now, show them all in a line. Because you wanted them in line, the list items will be shown in a line instead of being shown under each other as default. The x tabs will be the amount of the li used in the list, and it will show all the buttons or what ever you were trying to show. To do that the CSS is:
li {
display: inline;
}
To remove the bullet style, use this:
ul {
list-style: none;
}
This way the navbar will be shown in a line as other websites show.
Second question:
The sliders slide with the help of mouse, not jQuery (Just kidding). You can use scroll bars buddy, jQuery is used to scroll or slide, but that hides once slided. You will be able to see it but when it will scroll back it will hide, and go out of the page untill you slide it back again. You can just stick to the scroll bars to scroll or slide.
That's all!
jQuery slider:
From jQuery API if you check the slide() you will find out, that any event on any element would cause a slide (that will slide the element up and down) in some element.
Here would be an example:
$(document).ready(function () {
$("#slider").click(function () {
$(".navBar").slideToggle(1000); // the time consumed is 1 sec = 1000 milliseconds.
}
});
You can see, that a click on the element with id="slider" would slide the element with class="navBar" and the slide will consume the time of 1 second.
Advice or Suggestion:
I would like to advise you to first learn the basics about the codes that you will use. They are easily searchable via Google, Bing or any other search engine. Because if you will post questions that you know nothing about would cause downvotes for you. That's ridiculous I know. So please when you are going to use jquery and know nothing about it, please try to go to Google and write this search item jquery if nothing found then append tutorial to the search query and find it. Best tutorial would be found on the site of the developer. Like you can learn jQuery on jquery.com and JSON at json.org.