[Resolved] Text Logo in Navigation Bar

[Alok Sharma]

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;
}

[David]

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.

[Alok Sharma]

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?

[David]

I edited the code above to give the width property some importance. Let me know.

[Alok Sharma]

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;
	}
}

[David]

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 🙂

[Alok Sharma]

Hi David,

That sounds great!

[David]

It is 🙂

[Author]

Posts