Viewing 27 posts - 1 through 27 (of 27 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 1 year, 9 months 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

    #1055299

    I have resolved that.
    I just want to fix the search and locator icons at the top right

    #1055891

    Hi,

    I checked your site and the header looks fine to me. Please elaborate what exactly do you want to fix?

    Best regards,
    Vinay

    #1063013

    Good Day enfold,
    I am finding it difficult to replicate this header layout. I sent a jpeg link in the private area. Currently this is what I have: https://www.temzieshub.com:

    I have tried creating custom header and all but the were not falling in place.

    the search menu keep sticking with the menu and i could not create an area for the location Icon(which should link to another page
    Please I need you in help me create this urgently cause the client is already dissappointed.

    I will be waiting for your responds soon
    Thank you

    #1064223

    Hi Zeezou,

    Which screen size are we talking about now? Did you remove the search? Please, add the search so that we can see where it is now.

    Best regards,
    Victoria

    #1064472

    Hello Victoria,
    I have done that now.

    #1065009

    Hi Zeezou,

    Well, the search cannot be moved to the right as it is now. But you can add it to the widget that you added for the location icon.

    Here are some things you can try:
    http://colleges.claremont.edu/theme3-admin-guide/menus/

    Best regards,
    Victoria

    #1065239

    Hello Victoria,’

    I checked the link and I could not find anything that will help this situation.

    So you are saying it is impossible to achieve the header layout I sent.

    What about the Location icon. Is that also impossible

    Regards

    #1066749

    Hi,

    Thanks for the update.

    We can center align the logo, but we can’t move the search icon beside the cart. You can start with this css code.

    .html_header_top #top .av_logo_right .logo {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    Best regards,
    Ismael

    #1067381

    Good Day,
    It is not like I can not customize with the CSS but due to the utterance made.

    The mobile view has been altered especially for the header.

    Should I send you the backend for you to see the Quick CSS and how to edit. They are now conflicting with the new one sent.

    #1067387

    Can’t I hide the search Icon and repost a duplicate in the cart area.

    I also have issues with shopping cart icon which is now a padlock. The client requested for a bag. checking through the entypo-fontello website. I choose a bag. following one of your support page https://kriesi.at/support/topic/change-cart-icon-child-theme/

    It keeps giving the wrong Icon. Please I need to resolve this quickly. What login do you need to resolve this?

    Regards.

    #1068720

    Hi,

    Thanks for the update.

    1.) Which css code is not working? Post the login details in the private field so that we can check the modifications.

    2.) The character codes of the icons are available here:

    // http://web.archive.org/web/20140912210715/http://entypo.com/characters/

    Best regards,
    Ismael

    #1069624

    Thank you Ismael
    The link is available in the private link.

    Here is my Email for communication:

    Please What do you need me to do

    #1069628

    I forgot the Backend link. It is in the private content also

    #1070192

    Hi,

    Thanks for the update.

    We edited the code in the Quick CSS field. This is how the header looks now:

    Wider screens: https://imgur.com/a/n918ozb
    Mobile: https://imgur.com/a/MnlvphK

    Best regards,
    Ismael

    #1070505

    Wow! Thank you Ismael. I am very grateful for the modifications.

    Was told the search icon and not be moved from the menu. turned off and create another one on the right with the cart Icon

    I will also like to fix the cart icon to a bag icon which is a padlock right now.

    Much regards

    #1071657

    Hi,

    Thanks for the update.

    You can use this filter in the functions.php file to change the cart icon.

    add_filter('avf_default_icons','avia_replace_standard_icon', 10, 1);
    function avia_replace_standard_icon($icons) {
        $icons['cart'] = array( 'font' =>'entypo-fontello', 'icon' => 'ue85a');
        return $icons;
    }
    

    The default icon character code is “uf290”. You can also upload your own icon if you don’t like that one.

    // https://kriesi.at/documentation/enfold/icon/#adding-your-own-fontello-or-flaticon-icons-

    Best regards,
    Ismael

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

You must be logged in to reply to this topic.