Archived topic
Text Logo in Navigation Bar
7 replies · Started by Alok Sharma on July 25, 2018
Hi,
I have a few clients who don't have any logos and hence I am required to use a text logo. After going through various topics & posts in the forum and modifying & adding bits of PHP, HTML & CSS, I managed to get everything in shape except for the hamburger menu which is showing center aligned just below the text logo on mobile devices. But if I was using an image logo, the same is displayed at the right corner on the same line.
I just need help to display the hamburger menu on the right end of the logo.
I am putting down the entire code so that other people can also take advantage of it:
I modified the following PHP & HTML Code to display Text Logo in the Navigation Bar:
add_action( 'generate_inside_navigation','generate_site_title_navigation' );
function generate_site_title_navigation()
{
?>
<div class="menu-site-title">
<a href="<?php bloginfo( 'url' ); ?>"><?php bloginfo( 'name' ); ?></a>
</div>
<?php
}I modified the following CSS required to style the text logo:
.menu-site-title a {
font-size: 30px;
font-weight: bold;
float: left;
color: #ffffff;
padding-top: 7px;
padding-left: 10px;
text-transform: uppercase;
text-decoration: none;
}
@media (max-width: 768px) {
.menu-site-title a {
font-size: 20px;
}
}
.menu-site-title a:link, a:visited, a:active {
text-decoration: none;
color: #ffffff;
}Hi Alok,
thanks for sharing your code, i am sure others will find it useful.
You could try this CSS:
@media (max-width: 768px) {
.menu-toggle {
width: auto !important;
float: right;
}
}May need to adjust the CSS on your menu site title a little for alignment.
Hi David,
I added the CSS but unfortunately, it didn't work.
I also adjusted the ".menu-site-title a" CSS all the way to 0, but still, the hamburger icon position didn't change.
Shall I email the admin login access?
I edited the code above to give the width property some importance. Let me know.
Hi David,
Perfect. It worked like a charm. Thank you so much :-)
However, the hamburger icon was not aligning in line with the text logo. So I added -8px margin which is now aligning the text logo in line with the hamburger menu.
Here is the complete working code:
add_action( 'generate_inside_navigation','generate_site_title_navigation' );
function generate_site_title_navigation()
{
?>
<div class="menu-site-title">
<a href="<?php bloginfo( 'url' ); ?>"><?php bloginfo( 'name' ); ?></a>
</div>
<?php
}.menu-site-title a {
font-size: 30px;
font-weight: bold;
float: left;
color: #ffffff;
padding-top: 7px;
padding-left: 10px;
text-transform: uppercase;
text-decoration: none;
}
@media (max-width: 768px) {
.menu-site-title a {
font-size: 20px;
}
}
.menu-site-title a:link, a:visited, a:active {
text-decoration: none;
color: #ffffff;
}
@media (max-width: 768px) {
.menu-toggle {
width: auto !important;
float: right;
margin: -8px;
}
}Awesome! Thanks again for sharing. Just a note GP 1.7 Elements module will provide you with all of the core hooks for GP (and Woo, and any other plugin using a filter) so adding elements to other hooks like you have will become super simple :)
Hi David,
That sounds great!
It is :)
