Positie van winkelwage icontje veranderen
Op mijn webshop heb ik van boven naar beneden:
1- top bar (logo + zoek veld + winkelwagentje)
2- menu bar (waar de menu's zichtbaar zijn)
3- slid en atrikel overzicht etc....
4- etc....
wat wil ik?
Ik heb zo geregeld als je naar beneden scrolt de top baar verdwijnt en naar boven schuift en de menu baar aan de boven kant van de scherm gepositioneerd wordt, zodra weer naar beneden scrolt komt de top bar te verschijn.
Ik wil als ik naar boven scrolt de logo en zoek veld naar boven scrolt en niet meer zichtbaar is (zoals het nu het geval is) maar wil de winkelwagen helemaal aan de rechterzijde van de menu bar laten zien!!! Is dat mogelijk en hoe doe je dat.
Mijn vraag is hoe kun je zoiets doen?
Hieronder hoe de schrol op dit moment werkt.
Dank alvast voor de moeite.
.ps-sticky-header.scroll .martoni-topbar {
margin-bottom: -50px;
margin-top: -80px;
}
=========================================
Ik dacht met zo'n regel code:
.ps-sticky-header.scroll .martoni-cart
{
/* ***** wat moet ik hier neerzetten **** */
}
Gewijzigd op 23/09/2019 11:06:12 door Peet Peterse
Ergens boven aan de css zie ik deze:
.martoni-cart-amount {
position: absolute;
top: -5px;
left: 23px;
background: #f97807 !important;
border-radius: 15px;
width: 30px;
height: 30px;
padding: 4px 0 0 1px;
text-align: center;
color: #fff;
display: inline-block;
}
Gewijzigd op 23/09/2019 11:18:04 door Peet Peterse
Gewijzigd op 23/09/2019 11:22:24 door - Ariën -
Wat je zou kunnen doen is inderdaad het winkelwagen icoon een vaste positie geven in een gebied van je menubar waar ruimte is (die je dus ook hiervoor dient te reserveren, bijvoorbeeld met een padding of margin ofzo).
Realiseer je je tegelijkertijd dat daarmee het winkelwagen icoon niet automagisch is verhuisd naar je menubar, deze zit nog steeds in je top bar maar krijgt bij het scrollen een andere positie die niet afhankelijk is van de "flow" / structuur van je pagina. Met een vaste (fixed) positie haal je een element met deze positionering ook effectief uit deze "flow". Mogelijk zou je dus ook rekening moeten houden met de verschillende apparaten en bijbehorende resoluties waarmee jouw site bekeken kan worden.
Je zou natuurlijk ook kunnen opteren voor een variant waarbij zowel je top bar alsook je menubar een winkelwagen icoon bevatten (die mogelijk van uiterlijk en afmeting kunnen verschillen) waarbij er maar één tegelijkertijd zichtbaar is, afhankelijk van of je bovenaan de pagina zit of niet.
Ik denk dat je in beide gevallen wel een snippet JavaScript nodig hebt om dit aan te kunnen sturen.