-
AuthorPosts
-
December 3, 2017 at 9:07 pm #884398
How do we add a the phone number in between the logo and hamburger menu on mobile? Actually, it should also show in the center on desktop.
I want it centered. Bonus if we can style it on a button?- This topic was modified 6 years, 11 months ago by xtacx.
December 4, 2017 at 12:14 am #884467Hey xtacx,
Please try the following: http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/. We can help you out with styling once you’ve added the widget area.Best regards,
MikeJanuary 3, 2018 at 8:35 pm #892914Im hopping on this thread as Ive created a widget area in my header as described above, added 2 buttons but I would like them next to each other, not stacked as they are now, on the right side under the menu and not overlapping the menu. How can I style them this way?
January 4, 2018 at 12:48 am #893003Hi,
Try this code in the General Styling > Quick CSS field:.ls-button-widget-container {display: inline-block !important; float: right; top: 70%;} #ls-button-widget-ls_button_widget-3 {margin-right: 10px}
Best regards,
MikeJuly 4, 2018 at 2:31 am #980848Hi,
It seems that you already have a phone button next to the burger menu. Please explain what changes you would like.Best regards,
MikeJuly 4, 2018 at 8:49 am #981004Hello Mike,
the website XY is it not mine, I used it as an example ;-)
With help from people on the Enfold FB group I’ve been able to add a phone icon in the menu (not image in a widget area)
BUT I’m struggling with the icon size I would like it to be 20px – I cannot seem to make just that menu-item larger.
This is the test website: http://new.eaglebelgium.comThis is the PHP
/* Phone Icon */ if(!function_exists('avia_append_phone_icon')) { //first append search item to main menu add_filter( 'wp_nav_menu_items', 'avia_append_phone_icon', 9997, 2 ); add_filter( 'avf_fallback_menu_items', 'avia_append_phone_icon', 9997, 2 ); function avia_append_phone_icon( $items, $args ) { if ((is_object($args) && $args->theme_location == 'avia') || (is_string($args) && $args = "fallback_menu")) { $items .= '<li id="menu-item-phone" class="noMobile menu-item menu-phone menu-item-avia-special"> <a href="#" '.av_icon_string('phone').'><span class="avia_hidden_link_text">'.__('Phone','avia_framework').'</span></a> </li>'; } return $items; } } function avf_default_icons_mod($icons) { $icons['phone'] = array( 'font' =>'entypo-fontello', 'icon' => 'ue854'); return $icons; } add_filter('avf_default_icons','avf_default_icons_mod', 10, 1);
The CSS to hide the phone-icon on large screens
@media only screen and (min-width: 480px) { #menu-item-phone { display: none !important; } }
July 4, 2018 at 7:09 pm #981320Hi,
Please try this css:#menu-item-phone a[data-av_icon]:before { font-size: 20px !important; }
If you add this to your child theme style.css, please resave your theme settings to ensure your merged css is rebuilt.
If you find it’s not helping, please test in WordPress > Customize > Additional CSS.
Also be sure to clear your browser cache.Best regards,
MikeJuly 5, 2018 at 9:07 am #981470Thank you that worked!
One question
I usually use the “Quick CSS” option in the Enfold settings (me being lazy), but is it performance whise better to place it in the css of the childtheme?.July 5, 2018 at 12:32 pm #981557Hi,
Glad we could help,
the Quick CSS is a good place to add the css, it gets merged with the child theme style.css anyways.
Unless there is anything else we can help with on this issue, shall we close this then?Best regards,
MikeJuly 6, 2018 at 8:44 am #981901Hi Mike,
Yes this topic can be closed.July 6, 2018 at 11:53 am #981998Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)Best regards,
Mike -
AuthorPosts
- The topic ‘Add Phone number in between logo and hamburger menu on mobile’ is closed to new replies.