Archived topic
Site logo and title in navigation
9 replies · Started by Kritish on December 4, 2018
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.
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.
Hi David,
Thanks for that, I have added the logo.
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.
Hi David,
Yes I also needed to change the styling(?) of how the menu looks to match this image
Sorry I had the wrong link in my last post
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
Thanks for the help!
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.
I edited the code here: https://generatepress.com/forums/topic/site-logo-and-title-in-navigation/#post-748276
