![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: burger, left, logo center, menu
-
AuthorPosts
-
January 21, 2018 at 4:02 pm #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?
January 21, 2018 at 5:34 pm #900397Hey 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,
NikkoJanuary 23, 2018 at 7:34 pm #901628Hello,
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 #901975Hi 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, 7 months ago by
Victoria.
January 10, 2019 at 5:20 pm #1052384Good 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.
ThanksJanuary 11, 2019 at 9:11 am #1052645Hi Zeezou,
What have you tried so far and where can we see the results you are getting?
Best regards,
RikardJanuary 11, 2019 at 1:55 pm #1052743I 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 #1052744The website link is in the private content
January 11, 2019 at 6:44 pm #1052838Hi 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,
VictoriaJanuary 11, 2019 at 10:31 pm #1052929Thank 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 #1053655Hi 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,
VictoriaJanuary 18, 2019 at 1:22 am #1055299I have resolved that.
I just want to fix the search and locator icons at the top rightJanuary 19, 2019 at 4:52 pm #1055891Hi,
I checked your site and the header looks fine to me. Please elaborate what exactly do you want to fix?
Best regards,
VinayFebruary 5, 2019 at 6:12 am #1063013Good 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 youFebruary 7, 2019 at 5:59 pm #1064223Hi 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,
VictoriaFebruary 8, 2019 at 8:50 am #1064472Hello Victoria,
I have done that now.February 9, 2019 at 10:31 pm #1065009Hi 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,
VictoriaFebruary 11, 2019 at 1:02 am #1065239Hello 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 #1066749Hi,
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,
IsmaelFebruary 15, 2019 at 10:45 am #1067381Good 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 #1067387Can’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 #1068720Hi,
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,
IsmaelFebruary 20, 2019 at 6:57 pm #1069624Thank 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 #1069628I forgot the Backend link. It is in the private content also
February 22, 2019 at 4:21 am #1070192Hi,
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/MnlvphKBest regards,
IsmaelFebruary 22, 2019 at 11:37 pm #1070505Wow! 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 #1071657Hi,
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 -
This reply was modified 6 years, 7 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.