Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 25, 2020 at 11:17 pm #1197878
    kleine_designstube

    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

    March 26, 2020 at 7:25 am #1197958
    Rikard

    Hey Steffie,

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

    Best regards,
    Rikard

    March 26, 2020 at 7:57 am #1197967
    kleine_designstube

    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

    March 27, 2020 at 5:11 am #1198210
    Rikard

    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

    March 27, 2020 at 5:36 pm #1198383
    kleine_designstube

    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

    March 27, 2020 at 8:19 pm #1198420
    Jordan Shannon

    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

    March 29, 2020 at 9:15 pm #1198945
    kleine_designstube

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

    March 30, 2020 at 7:11 pm #1199135
    Jordan Shannon

    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

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Logo and mobile menu center’ is closed to new replies.