- This topic has 17 replies, 2 voices, and was last updated 3 years, 8 months ago by Leo.
-
AuthorPosts
-
August 13, 2020 at 1:22 pm #1401571Edward
I have added contact icons and links using href in my top bar on the desktop, and that is working well. But on mobile view, I have hidden the top bar to save space. I would like to display only the fontawesome icons with links on my mobile header. I have gone to Appearance – Elements and selected the generate_inside_mobile_header hook. But I’m not sure where to go from here. Thanks for checking out my issue!
August 13, 2020 at 3:29 pm #1401723LeoStaffCustomer SupportHi there,
Does this help?
https://generatepress.com/forums/topic/add-phone-icon-to-right-of-menu-in-mobile-header/August 14, 2020 at 7:53 am #1402793EdwardUsing the help video on the Hook Element, I’ve been able to take my code from the Top Bar and put it in a the hook – generate_inside_mobile_header
The three icons show up on the left edge of the mobile header, I would like them to be right of the logo. The site is really coming along great, thanks to your help there at GP!<i class=”fa fa-phone” style=”color:green;”><!– icon –></i>
<i class=”fa fa-comment” style=”color:light-blue;”><!– icon –></i>
<i class=”far fa-envelope” style=”color:light-blue;”><!– icon –></i>
I tried th e CSS that David provided in the thread Add-phone-icon-to right-of-menu-in-mobile-header
#mobile-header .phone-icon {
order: 4 !important;
margin-right: 10px;
}and I tried shifting an icon using the below code without success
.fa.fa-phone {
margin-left: l0px !important;
}August 14, 2020 at 8:51 am #1402879LeoStaffCustomer SupportGlad to hear 🙂
August 14, 2020 at 8:54 am #1402889EdwardThanks for taking a look, I am still trying to move the three font awesome icons to the right of my mobile logo.
August 14, 2020 at 8:56 am #1402890LeoStaffCustomer SupportCan you give each of those
<a>
tag a custom class?August 14, 2020 at 9:06 am #1402909EdwardSorry, I’m lost. I don’t know how to go about creating the custom class.
August 14, 2020 at 9:11 am #1402914LeoStaffCustomer SupportAugust 14, 2020 at 10:09 am #1402995EdwardOk, thanks. Looking at the teamtreehouse page, I changed my hook to the code below. But when I am not able to move the icon with CSS when targeting .phone-icon. Did I create the class correctly?
<a href="tel:7606220141" /><i class="fa fa-phone" style="color:green;"><!-- icon --></i> 
August 14, 2020 at 10:11 am #1403003LeoStaffCustomer SupportTry something like this:
a.phone-icon { order: 2; }
August 14, 2020 at 10:11 am #1403006EdwardThe code got changed on the above when I sent it. I actually had <a class and “phone-icon” in the hook.
August 14, 2020 at 10:18 am #1403020EdwardAugust 14, 2020 at 10:20 am #1403024EdwardThe code changed again when I sent it. I see there is a tab for code above, here’s another try.
`<i class=”fa fa-phone” style=”color:green;”><!– icon –></i>
<i class=”fa fa-comment” style=”color:light-blue;”><!– icon –></i>
<i class=”far fa-envelope” style=”color:light-blue;”><!– icon –></i>
August 14, 2020 at 10:21 am #1403025LeoStaffCustomer SupportI’m not seeing the CSS being added.
When I add it using browser inspector tool, it works:
https://www.screencast.com/t/wy8XwSWQnQPlease remember to highlight you code and click the CODE button in the editor here.
August 14, 2020 at 10:21 am #1403029EdwardDidn’t go through accurately again. I guess I could send a screenshot.
-
AuthorPosts
- You must be logged in to reply to this topic.