Archived topic
site title instead on logo on mobile heder
15 replies · Started by Daniel on December 8, 2016
Hi Tom,
Can You please instruct me how do I replace mobile header logo to present site title and site tag line insted?
I have access to theme files, and know css so I can do later design adjustments.
just need your help with file location and function that will replace current logic that allows only logo upload and presentation on header mobile
Thanks,
Daniel.T
Hi Daniel,
You can use the generate_inside_mobile_header hook:
add_action( 'generate_inside_mobile_header','tu_mobile_header_html' );
function tu_mobile_header_html() { ?>
<div class="mobile-header-content">
Your site title etc..
</div>
<?php }
Then style it:
.mobile-header-content {
float: left; /* etc.. */
}
Hope this helps :)
thanks for the hook it helped :)
You're welcome :)
Hello,
where do I enter this code-snippet?
add_action( 'generate_inside_mobile_header','tu_mobile_header_html' );
function tu_mobile_header_html() { ?>
<div class="mobile-header-content">
Your site title etc..
</div>
<?php }
Hello Tom,
I also would like the site title and the menu toggle in one line with the site title floating left and the menu toggle button floating right (hamburger menu).
See my site: upconversion.de
How can I achieve it?
thanks
This should help: https://generatepress.com/knowledgebase/adding-php-functions/
Adding the float:left CSS mentioned above should do that for you :)
It says add to place the code in "generate_inside_mobile_header hook" I don't see that as an option in GP hooks. Am I looking in the wrong place?
That hook is not included in the hook module as it's not commonly needed so you will have to add it as a snippet:
https://generatepress.com/forums/topic/site-title-instead-on-logo-on-mobile-heder/#post-255702
https://generatepress.com/forums/topic/site-title-instead-on-logo-on-mobile-heder/#post-255714
Add it where?
I did it...sort of. Text is black whereas I wanted white, so just need to know how to change the text color. Here is my site.
Nicely done!
Now we can just add the color to the current CSS you have:
.mobile-header-content {
float: left;
color: #ffffff;
}
Fantastic....thanks Leo. Worked out just like I wanted.
Of course if you could make it jump around, change colors, etc. JUST KIDDING!