Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #129430
    wouwonline
    Participant

    Hi,

    On tablets and phones the menu is not always shown. See screenshot.
    http://test.blokker-fysiotherapie.nl/

    How can we add the menu on mobile devices?

    2. There is no white space between the logo and the ‘make an apointment’ section (right top header).

    How can I add white space between them?

    #129484
    Skandha
    Participant

    Hello @wouwonline, To display menu on mobile devices Go to => Appearance => Customize => Additional CSS and add the following code

    #menu-toggle-primary {
    color: #5b5b5b;
    }

    The right top header looks fine at my end and the logo seems to be at left top.
    Let me know if you have any more issues!

    Regards,
    Skandha

    #129485
    tikaram
    Keymaster

    @wouwonline: Add the following additional css to add some space between logo and make an appointment.

    @media screen and (max-width: 767px) {
    #site-logo {
    	padding-bottom: 25px;
    }
    }

    Let me know if you have any further issues.

    Regards,
    Tikaram

    #129559
    wouwonline
    Participant

    Hi,

    Thanks!

    About the alignment in the top header. What I mean is that the button is aligned right, and the text is aligned centered.
    Is it possible to place the button also in the center?

    #129568
    Skandha
    Participant

    @wouwonline: To align the button with the text Goto => Appearance => Customize => Additional CSS and add the following CSS code

    h2.widget-title {
    	position: absolute;
    	top: 50px;
    	right: 40px;
    }
    
    .button-minimal.red {
    	position: absolute;
    	right: 55px;
    	top: 105px;
    }
    
    #call-to-action-widget .textwidget p {
    	position: absolute;
    	right: 45px;
    }

    Let me know if this solves your issue!!

    Regards,
    Skandha

    #129608
    Skandha
    Participant

    @wouwonline: To align the button to the text in mobile devices Goto => Appearance => Customize => Additional CSS and add the following CSS Code.

    @media screen and (max-width: 480px) {
                    #menu-toggle-primary {
                        margin-top: 60px;
                    }
                    
                    .button-minimal.red {
                        position: absolute;
                        top: 205px;
                        right: 95px;
                    }
                    
                    h2.widget-title {
    	               position: absolute;
    	               top: 160px;
    	               right: 70px;
                    }
                    
                    #call-to-action-widget .textwidget p {
    	               position: absolute;
    	               right: 105px;
                       top: 180px;
                    }
                    
                    a img {
                        margin-bottom: 10px;
                    }
    }

    Let me know if you have any more issues!

    Regards,
    Skandha

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Menu on mobile devices + space between logo and right top header’ is closed to new replies.