Menu left logo centered search icon right - Support | Kriesi.at

Tagged: burger, left, logo center, menu

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

Author

Posts
January 21, 2018 at 4:02 pm #900373

mantas0527
Participant

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?

January 21, 2018 at 5:34 pm #900397

Nikko
Inactive Moderator

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

January 23, 2018 at 7:34 pm #901628

mantas0527
Participant

Hello,

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

January 24, 2018 at 7:46 am #901975
Victoria
Inactive Moderator
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 6 years, 9 months ago by Victoria.
January 10, 2019 at 5:20 pm #1052384

Zeezou
Participant

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

January 11, 2019 at 9:11 am #1052645

Rikard
Keymaster

Hi Zeezou,

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

Best regards,
Rikard

January 11, 2019 at 1:55 pm #1052743

Zeezou
Participant

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.

January 11, 2019 at 1:57 pm #1052744

Zeezou
Participant

The website link is in the private content

January 11, 2019 at 6:44 pm #1052838
Victoria
Inactive Moderator
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
January 11, 2019 at 10:31 pm #1052929

Zeezou
Participant

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

January 14, 2019 at 1:06 pm #1053655

Victoria
Inactive Moderator

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

January 18, 2019 at 1:22 am #1055299

Zeezou
Participant

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

January 19, 2019 at 4:52 pm #1055891

Vinay
Inactive Moderator

Hi,

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

Best regards,
Vinay

February 5, 2019 at 6:12 am #1063013

Zeezou
Participant

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

February 7, 2019 at 5:59 pm #1064223

Victoria
Inactive Moderator

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

February 8, 2019 at 8:50 am #1064472

Zeezou
Participant

Hello Victoria,
I have done that now.

February 9, 2019 at 10:31 pm #1065009

Victoria
Inactive Moderator

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/

Add search to secondary menu

Best regards,
Victoria

February 11, 2019 at 1:02 am #1065239

Zeezou
Participant

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

February 14, 2019 at 3:19 am #1066749
Ismael
Moderator
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
February 15, 2019 at 10:45 am #1067381

Zeezou
Participant

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.

February 15, 2019 at 11:02 am #1067387

Zeezou
Participant

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.

February 19, 2019 at 3:23 am #1068720

Ismael
Moderator

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

February 20, 2019 at 6:57 pm #1069624

Zeezou
Participant

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

February 20, 2019 at 6:59 pm #1069628

Zeezou
Participant

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

February 22, 2019 at 4:21 am #1070192

Ismael
Moderator

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

February 22, 2019 at 11:37 pm #1070505

Zeezou
Participant

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

February 26, 2019 at 7:29 am #1071657
Ismael
Moderator
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
Author

Posts

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

You must be logged in to reply to this topic.