Support Volgende » CSS / opmaak vragen Volgende » Responsive menu

  • Goedendag,

    Ik heb een probleempje met het “mobile” menu van de website ursydesign.nl.
    Het normalen menu wordt prima weergegeven maar het mobile menu vertoont wat vreemde gedragingen.
    Het menu blijft op een tablet openstaan en klapt niet in en blijft irritant in beeld staan.
    Op mijn telefoon doet het menu het wel goed.
    Tevens is de zoekbalk in het menu overbodig en staat ook niet mooi.
    De zoekbalk op de site zelf is meer dan voldoende.
    Het gebruikte thema is : Centilium
    Wie weet er een oplossing voor dit probleempje ?

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)
  • Hoi,

    Als ik de header van jouw site vergelijk met het origineel (demo hier), dan valt me op dat het mobiele menu anders uitklapt. Heb jij wijzigingen aan de header van je site aangebracht?

    De zoekwiget kan ook handig zijn op mobiel scherm, maar als je die toch niet wilt tonen, kun je dit op de aangepaste CSS pagina in de Customizer toevoegen:

    
    @media (max-width: 767px) {
      .widget_search {display:none;}
    }
    

    Guido

    Hoi Guido,

    Ik zag het nu ook dat het menu anders uitklapt.
    volgens mij is de header niet aangepast maar zeker weten doe ik het nog niet.
    Ik zal er naar kijken.
    Daar kom ik nog op terug.
    Alvast bedankt voor je reactie !

    Ik had ondertussen het thema geheel opnieuw geinstalleerd en nog steeds bleef het menu verkeerd uitklappen.
    ik ben nu bezig met een ander thema omdat de maker van het theme ook niet reageerd.

    Hi @alfist,

    It is all in your css files buddy.
    If I compare the demo version with your then on mobile your .head-nav ul is set as relative on line 411 in style.css
    This should be ‘absolute’

    Do the following in your style.css
    CHANGE

    .logo-image img{
    	max-width: 650px;
    	height: 180px;
    	padding-bottom: 5px;
    	position:relative;

    TO

    .logo-image img{
    	max-width: 250px;
    	height: 90px;
    	padding-bottom: 5px;
    	position:relative;

    And CHANGE

    	.head-nav ul{
    		position:relative;
    		margin: 0;
    		padding: 2% 0;
    		z-index: 999;
    		width: 70%;
    		display: none;
    		text-align: center;
    		*background:#287E8B;
    		left:0em;
    		top:90px;
    	}

    TO

    	.head-nav ul{
    		position:absolute;
    		margin: 0;
    		padding: 2% 0;
    		z-index: 999;
    		width: 70%;
    		display: none;
    		text-align: center;
    		*background:#287E8B;
    		left:0em;
    		top:90px;
    	}

    Your big ass logo is ruining your styles.
    Let us know if this fixed your issue.

    EDIT: Geen idee waarom ik dit in het Engels schreef, denk gewoonte. Als je het niet begrijpt vertaal ik het wel.

    • Deze reactie is gewijzigd 6 maanden, 1 week geleden door  helldog2018. Reden: Engelse tekst
4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)
  • Het onderwerp ‘Responsive menu’ is gesloten voor nieuwe reacties.