Ondersteuning » Thema en CSS/opmaak » Sticky menu ook op mobiel?

  • Hi!

    Ik ben met een webshop bezig en heb een responsive thema gekocht.
    Nu zit er op mobiel-view een navigatie-icoontje die een mooi menu uitklapt, maar als ik veel producten op een pagina heb en naar beneden scroll dan moet je eerst weer helemaal naar boven om te navigeren door de site.

    Weet iemand hoe ik de navigatieknop sticky maak, zodat het bovenin blijft staan als je gaat scrollen..?

    Mijn testsite is te vinden via tripodtest.lovelings.nl

    Het zou me enorm helpen :).

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • .small-device-nav {
    position:fixed;
    z-index:999999;
    background: white;
    }

    Position:fixed doet eigenlijk al de trick, z-index met het hoge nummer maakt dat het de top-layer wordt (en dus altijd zichtbaar en niet ‘achter’ de foto’s verdwijnt), background: white maakt dat het ‘hamburger-icoontje’ een witte achtergrond heeft, zodat ie goed zichtbaar is bovenop de foto’s.
    gr. Lianne

    Thread starter Wanderer

    (@lovelings)

    Bedankt Lianne! Ook fijn dat je erbij hebt gezet wat waarvoor dient, zo leer ik het beetje bij beetje te begrijpen.

    Is er ook nog een manier om bij het scrollen het icoontje eerst mee te laten scrollen tot te bovenkant van het scherm en hem daar pas ‘vast’ te zetten? Hij blijft nu in het midden van het scherm zitten.

    Een voorbeeld wat ik bedoel is als je deze site op mobiel bekijkt: http://shop.spelldesigns.com/

    Dankjewel en groetjes,
    Kelly

    Dan moet je javascript gebruiken, lijkt me voor nu iets te hoog gegrepen.

    Wat ik zou doen is het volgende. Je krijgt je hamburgertje bij schermbreedtes lager dan 767px (iPad in portrait = 768px, vandaar deze gebruikelijke grens). Ik zou het hamburgertje helemaal bovenaan zetten en de social icons aan de rechterkant. Twee dingen moet je hiervoor toevoegen.

    Aanvulling op code die hierboven staat:

    .small-device-nav {
    position:fixed;
    z-index:999999;
    background: white;
    margin-top:-200px;
    }

    Nieuwe declaratie:

    @media only screen  and (max-width: 767px){
    .socialicons > ul.cosmo-social {
    float:right;
    }
    }

    Dit laatste betekent dat wanneer het scherm smaller wordt dan 767px de icons naar rechts gaan. Je kunt ze eventueel ook nog wat marge vanaf de top geven, want daar staan ze nu strak tegen aan. Dit zou ik ook in de destopversie doen. Code:

    .socialicons  {
    margin-top: 5px;
    }

    Speel naar believen met de aantal px-jes, dan komt het goed!
    Succes!
    groet,
    Lianne

    Thread starter Wanderer

    (@lovelings)

    Hi Lianne!

    Ik heb het hamburgertje inderdaad omhoog gekregen en ziet er al stukken beter uit, bedankt!

    De social icons mogen wat mij betreft op ‘hide’ staan op small devices. Kan dat met hetzelfde stukje code maar dan ‘float’ ergens door vervangen?

    Weet jij ook hoe ik de tekst naast het winkelwagenicoontje op ‘hide’ kan zetten?

    Als het allemaal teveel is om uit te zoeken, zou ik jou ook heel graag willen inhuren hoor 😉 Jij hebt er volgens mij veel verstand van en ook met javascript?

    Ik hoor het graag, fijne avond!
    Kelly

    Hi Kelly,

    Verbergen van social icons (zet dit onderin je style.css)

    @media only screen  and (max-width: 767px){
    .socialicons > ul.cosmo-social {
    display:hidden;
    }
    }

    Verbergen tekst naast winkelwagen (

    .gbtr_little_shopping_bag .minicart_items {
    display:none;
    }

    Het rechterblokje (sign in en shopcart) wordt nu wel nog wat slordiger. Dit zou eigenlijk rechts uitgelijnd moeten zijn om mooi over te komen. Hiervoor moet je (het verstandigst) wat doen in je php-bestanden.

    Ik doe hier mijn dingen om-niet, maar ben uiteraard ook in te huren. Zo gewenst wil ik je graag verder helpen met het verder professionaliseren van je website. Klik op mijn naam, dan kom je uit op mijn website en dus contact-mogelijkheden.

    groet,
    Lianne

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Het onderwerp ‘Sticky menu ook op mobiel?’ is gesloten voor nieuwe reacties.