[Resolved] Text Logo in Navigation Bar

Home Forums Support [Resolved] Text Logo in Navigation Bar

Home Forums Support Text Logo in Navigation Bar

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #632171
    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;
    }

    Thanks,

    Alok Sharma
    https://aloksharma.in

    GP Premium 1.6.2
    #632378
    David
    Staff
    Customer Support

    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.

    #632387
    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?

    Thanks,

    Alok Sharma
    https://aloksharma.in

    #632420
    David
    Staff
    Customer Support

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

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

    Thanks,

    Alok Sharma
    https://aloksharma.in

    #632518
    David
    Staff
    Customer Support

    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 πŸ™‚

    #632520
    Alok Sharma

    Hi David,

    That sounds great!

    Thanks,

    Alok Sharma
    https://aloksharma.in

    #632521
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.