Okay
  Public Ticket #2946802
Logo in the center of the page
Closed

Comments

  •  1
    Agur started the conversation

    Hello,

    I would like to center the logo on my page but can't seem to be able to properly do so. I tried following CSS: 

        #logo {
            left: 50%;
            }

    The logo moved but slightly off center. Also when switching to tablet or mobile mode, the logo started to misalign with the menu button.

    Also, I tried "text-align: center" in CSS but nothing happened.




  •  1,823
    Support replied

    Hello,

    try

    #logo {
        float: none;
        left: 50%;
    }

    in customizer  -> additional CSS and use the burger menu type (fullscreen on desktop)

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •  1
    Agur replied

    Tried it, but still the logo is slightly off center. When switching to mobile it appears on the far right.

    Screenshots attached.

    Now when using burger menu on fullscreen, then I would rather like to display the menu button in the center as well, below the logo, but I can't pinpoint the id of the burger menu button.

  •  1,823
    Support replied

    Hello,

    we need access to your site so we can inspect the page, if possible. All we get now is a splash screen

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •  1,823
    Support replied

    Hello,

    in the meanwhile try the following CSS instead:

    #logo {
        position: absolute;
        float: none;
        left: 50%;
        margin-left: -96px; 
    }

    the value for margin-left must be half of the logo's width we put -96px but you can change it

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •  1
    Agur replied

    Hi, 

    Thank you for your reply. The last CSS worked, I got the logo in the center, but I would like it to appear in the center in relation to media caroussel and the top of the page as well. Also I would like the logo to align with the burger menu. I could bring the logo downwards a bit using "top 60px" in CSS, and it would align with the burger menu, but when changing the size of the window (or switching to mobile mode), the logo and the menu button misalign. Is there a way to keep them aligned with one another, when resizing the browser window? Or another option: when switching to mobile screen the burger menu button would appear in the center, below the logo (picture of desired result attached).

    I made the page public for you to inspect. 

    Thank you in advance!

  •  1,823
    Support replied

    Please provide us your website access.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •  1
    Agur replied

    The page should be public for now. If you need wordpress admin access please provide your e-mail first so I can send you the information. 


  •  1,823
    Support replied

    Please add these styles in css:

    @media only screen and (max-width: 1024px) {
    #logo {
        position: absolute;
        float: none;
        left: 50%;
        margin-left: -82px;
        top: 20px;
    }
    .button-wrap.right.menu {
        right: 50%;
        margin-right: -40px;
        top: 40px;
    }
    }

    @media only screen and (max-width: 479px) {    
    .button-wrap.right.menu {
        right: 50%;
        margin-right: -40px;
    }
    }


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •  1
    Agur replied

    Excellent! Thank you for your support!