- This topic has 9 replies, 2 voices, and was last updated 6 years, 2 months ago by Leo.
-
AuthorPosts
-
January 16, 2018 at 6:44 am #472165Carel
Hi Team
Thanks for the great theme I am loving it.
I am trying to get social icons displayed on my mobile header and remove the secondary header menu burger and the primary header menu burger for the mobile header only. I have installed Snipets to add the HTML but the primary menu burger remained after adding both sets of CSS but i am amusing the CSS should have been combined.
Many thanks
Martin
January 16, 2018 at 9:31 am #472412LeoStaffCustomer SupportHi there,
Your website link requires log in and password.
Can you provide the actual live link to it?
I’m assuming this is what you are looking for: https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header
January 16, 2018 at 11:00 am #472508CarelYe that is indeed what Im looking for but then a step by step guide to remove both burger icons and leaving my logo and social icons on the sticky mobile header.
I am assuming (Your mobile header HTML in here) is where you put the code for the social icons but how would you make them link to your social website?
I have no knowledge of CSS or HTML, dont know what they stand for or mean so really could use some assistance ๐ http://qualitymountaindays.com/ dont even know if that is my live website. Hope that works and excuse the messMany thanks
January 16, 2018 at 1:50 pm #472662LeoStaffCustomer SupportYour PHP would be something like this (using facebook icons for example):
add_action( 'generate_inside_mobile_header','tu_mobile_header_html' ); function tu_mobile_header_html() { ?> <div class="mobile-header-content"> <a href="https://YOUR-FACEBOOK-LINK-HERE"> <i class="fa fa-facebook-square"></i></a> </div> <?php }
You will need to replace YOUR-FACEBOOK-LINK-HERE and choose the icons here: http://fontawesome.io/icons/
CSS would be the same as this one: https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header
Hide the mobile toggle on sticky mobile header should be this:
@media (max-width: 768px) { .mobile-header-logo .main-navigation.navigation-stick.mobile-header-navigation .menu-toggle { display: none; } }
January 16, 2018 at 7:08 pm #472855Carel๐ DUDE nice one. almost where I want it just slightly lower how do you get it next to my logo? oh and also how to I make my logo bigger on mobile and smaller on desktop?
January 16, 2018 at 9:34 pm #472916LeoStaffCustomer SupportHmm I’m not seeing any CSS being added currently?
January 16, 2018 at 10:51 pm #472939CarelSorry I have no idea,
I added @media (max-width: 768px) {
.mobile-header-logo .main-navigation.navigation-stick.mobile-header-navigation .menu-toggle {
display: none;
}
}
in the additional CSS tab in the GP customizerand added
add_action( ‘generate_inside_mobile_header’,’tu_mobile_header_html’ );
function tu_mobile_header_html() { ?><?php }
in the snipets plugin
and it is working how i want it on my end just not at the height i want itJanuary 17, 2018 at 1:49 am #473006CarelHi Leo
I have tried something different that could work with some help. I have replaced my normal menu with my social menu and now I only want to see see the actual social icons and my logo in the mobile site if possible even if they are small
Many thanksJanuary 17, 2018 at 4:14 am #473075CarelHi again
I found a video explaining how to use elementor to do it so ill give that a shot thank for the helpJanuary 17, 2018 at 5:59 am #473138LeoStaffCustomer SupportOk let me know if you want to use GP instead.
We were pretty close I think.
-
AuthorPosts
- You must be logged in to reply to this topic.