[Resolved] Site logo and title in navigation

[Kritish]

Hi,

I am new to using generatepress, I have looked around in the document library and searched on the support forums but I am unable to find something that works for me. I have found things from here and there and used code snippets to move my header into the navigation as you can see on my website, but I am unable to add a logo next to the site title.

I have used the following php code to get my title moved from my header into the navigation

add_action( 'after_setup_theme', 'tu_navigation_as_header' );
function tu_navigation_as_header() {
	remove_action( 'generate_header', 'generate_construct_header' );
	add_action( 'generate_inside_navigation', 'tu_site_title_navigation' );
}

function tu_site_title_navigation() {
    ?>
	<div class="site-branding">
		<p class="main-title" itemprop="headline">
			<a href="<?php echo site_url(); ?>" rel="home">
				<?php bloginfo( 'name' ); ?>
			</a>
		</p>
	</div>
    <?php
}

Along with this CSS

.main-navigation .site-branding {
	float: left;
}

.main-navigation .site-branding a {
	line-height: 60px;
	font-size: 20px;
}

I have to replicate the menu layout of another site onto my site, the colours don’t have to match, but the look does. The title/logo is on the left, the menu is on the right. I have blocked out the website name as I do not own the site.

https://imgur.com/MSLn6ZF

[David]

Hi there,

if you add the Logo in Customizer > Layout > Primary Navigation Logo (Sticky + Static). Then we can provide the CSS to arrange them. Let us know where you want the logo once it has been added, i assume before the site title.

[Kritish]

Hi David,

Thanks for that, I have added the logo.

[David]

Hi there,

looking good, i can see logo, i assume its in the correct position?
BTW the logo size is defined by the Menu Height you set in the Customizer > Layout > Primary Navigation. Let me know if you need anything else.

[Kritish]

Hi David,

Yes I also needed to change the styling(?) of how the menu looks to match this image

[Kritish]

Sorry I had the wrong link in my last post

[David]

Ok so the colors you can change in the Customizer, to add the borders use this CSS:

.main-navigation ul.menu > li {
    border-left: 1px solid #fff;
}
.inside-navigation {
    box-sizing: border-box;
}

The second rule for box-sizing will stop the nav from expanding to wider than the screen

[Kritish]

Thanks for the help!

[Kritish]

Hi David,

I just noticed the line goes all the way down to the submenu as well on my site, I only needed the white line for the main menu not anything under it.

[David]

I edited the code here: https://generatepress.com/forums/topic/site-logo-and-title-in-navigation/#post-748276

[Author]

Posts