Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #900373

    Hello,

    I am setting up my website and would like to place burger menu icon on the left, logo centered and search icon on the right. Everything should be in the same line. Is it possible to do it?

    #900397

    Hey mantas0527,

    The search is located inside the popup menu when burger menu is clicked, would it be okay if we just have the logo centered and burger menu on the left?

    Best regards,
    Nikko

    #901628

    Hello,

    Yes it would be nice as well. Or it could be shop icon on the right as it going to be ecommerce website.

    #901975

    Hi mantas0527,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (max-width: 375px) {
      #menu-item-shop .cart_dropdown_link {
        padding: 0 20px;
      }
      .responsive #top #menu-item-shop.cart_dropdown {
        margin-left: 170px;
      }
      .responsive #top #wrap_all .container {
        width: 95%;
        max-width: 95%;
      }
      .responsive #top .logo {
        width: 49%;
        float: right;
        margin-right: 80px;
      }
    
    .responsive #top #wrap_all .main_menu {
        height: 80px;
        left: 0px;
    }
    }
    @media only screen and (min-width: 376px) and (max-width: 475px) {
      .responsive #top #menu-item-shop.cart_dropdown {
        margin-left: 210px;
      }
        #menu-item-shop .cart_dropdown_link {
        padding: 0 20px;
      }
      .responsive #top #wrap_all .container {
        width: 95%;
        max-width: 95%;
      }
      .responsive #top .logo {
        width: 49%;
        float: right;
        margin-right: 80px;
      }
    
    .responsive #top #wrap_all .main_menu {
        height: 80px;
        left: 0px;
    }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    • This reply was modified 11 months, 3 weeks ago by  Victoria.
    #1052384

    Good evening everyone

    I am having the same issue. I need the hamburger menu on the left, logo center and search, shopping icon on the right.

    I am also having issues with changing the shopping cart icon to a bag icon.

    Please I need this urgently. Been struggling with it.

    I saw a lot of similar issues but none worked for me. It got me confused.
    Thanks

    #1052645

    Hi Zeezou,

    What have you tried so far and where can we see the results you are getting?

    Best regards,
    Rikard

    #1052743

    I have tried a lot of this which started with creating a child theme and adding some lines of code in the fuction.php and custom css.

    Created a custom widget header but it did not serve the purpose
    I had to clean every custom code because they are contradicting one another.
    Now I aam working on a clean slate with just making menu hamburger icon left logo right.
    Then I used css to adjust the logo center and menu icon more left.
    .logo img {
    margin-right: 300px;
    }

    this does not work at all
    #header_main .container, .main_menu ul:first-child > li a {
    margin-left: 20px !important;
    }

    .av-main-nav-wrap {
    right: 100px;
    }

    Now I need the drop down to display on the left and the search icon should stay with a bag cart icon which seem to be sticking to t.
    he edge of the page.

    #1052744

    The website link is in the private content

    #1052838

    Hi Zeezou,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (min-width:990px) {
        .html_av-overlay-side .av-burger-overlay-scroll {
            -webkit-transform: translateX(0px);
            transform: translateX(0px);
            -webkit-transition: all 0.5s cubic-bezier(0.75,0,0.25,1);
            transition: all 0.5s cubic-bezier(0.75,0,0.25,1);
            left: 0;
        }
    
        #top .av-small-burger-icon {
            margin-left: 20px;
        }
        .html_header_top #top .av_logo_right .logo { width: 13vw;left: 37vw; }
    }
    
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1052929

    Thank you Victoria. The logo is at the center and the left hamburger, drops down right on desktop view but covers up the page on mobile view. Is there a way of reducing the drop down size not to cove up the page for mobile view.

    Secondly
    changing the woo cart icon to a bag icon with the search icon.

    Much regards

    #1053655

    Hi Zeezou,

    The code I gave you does not affect the mobile view, it simply does not work for screen sizes below 990px.

    https://cl.ly/9700b9bf8d75 Do you mean you want the burger flyout not so wide?

    Best regards,
    Victoria

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

You must be logged in to reply to this topic.