Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1197878

    Hi,
    sorry I can´t find the right solution for me in this forum, so could you please help me out with this issue:

    1) I want to place the logo on the mobile menu in center.
    2) I would like to make the logo a bit larger,
    2) the menu (the three lines) should be below the logo.

    I found a soulution, that works for the mobile screen, but than, my desktop page loosing it´s css stlyes.

    @media only screen and (max-width:767px) {
    .responsive #top .logo {
    width: 100%;
    padding-left:15%;
    padding-top: 10px;
    }

    @media only screen and (max-width: 767px) {
    .container.av-logo-container{
    margin-left:0px!important;
    margin-right:0px!important;
    }

    .responsive .logo img {
    margin: 0 auto;
    width: 100%;
    padding-left:10px;
    max-height: 100%;
    }

    @media only screen and (max-width:767px) {
    .responsive #top .logo {
    width: 100%;
    padding-top: 10px;
    }

    .responsive #top #wrap_all .main_menu {
    position: static;
    display: flex;
    margin-top: -30px;
    }

    .responsive #top #wrap_all .main_menu .avia-menu {
    width: 60%;
    order: 2;
    }

    .responsive #top #wrap_all .main_menu .avia-menu .av-burger-menu-main {
    float: right;
    }

    .responsive #top #wrap_all .main_menu .social_bookmarks {
    width: 50%;
    order: 1;
    }

    Thank you in advance,
    Steffie

    #1197958

    Hey Steffie,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    #1197967

    Hallo Rikard,
    Here is the link to the website. Please notice that I deleted the css style I wrote in my first question, because it didn’t work well.

    Link to Website

    All my questions belongs only to the mobile version of the site.

    Best regards, steffie

    #1198210

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
    .responsive #top .logo {
        width: 100%;
    }
    .responsive .logo img {
        display: table;
        margin: 0 auto !important;
        max-height: 100px;
    }
    .responsive #top #wrap_all .main_menu {
        position: relative;
    }
    .responsive #top .av-main-nav .menu-item-avia-special {
        display: contents;
    }
    }

    Best regards,
    Rikard

    #1198383

    Hi Rikard,
    thanks, almost done. The Logo is centered now and fine, but the menu is on the left side and should be also in the middle under the logo.

    thanks in advace for your great support.

    Cheers, Steffie

    #1198420

    Hi,

    Add this to quick css:

    @media only screen and (max-width: 767px) {
    .avia-menu.av-main-nav-wrap{
    left:37%!important;
    }}

    Best regards,
    Jordan Shannon

    #1198945

    Hi Jordan,
    That´s it. Thank you for your great support!!
    Best regards,
    Steffie

    #1199135

    Hi,

    No problem at all I’m happy to help. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Logo and mobile menu center’ is closed to new replies.