Sticky Navigation Logo Change

Hi Jefri,

you can just this method:

https://generatepress.com/forums/topic/change-logo-media-source-file-when-sticky/#post-304545

Alternatively you can do this:
Add a site identity logo and set your navigation location to float right of the logo.
Then assign a different navigation logo to Sticky only.

Thanks, simple question where in hooks do I insert this code:

add_action( 'generate_inside_navigation','tu_navigation_logos' );
function tu_navigation_logos() {
?>

<?php
}

Thanks.

Also the second method didn't work for me. Can you please tell me how to set a logo to 'stick only'

Cheers

Hi Jefri,

i would add the code using Code Snippets plugin instead, link here explains more:

https://docs.generatepress.com/article/adding-php/

Logo on sticky nav only in Customiser > Layout > Primary Navigation > Navigation Logo Placement (appears below Navigation Logo when added) > Sticky

Thanks for the replies, I tried the snippet but it did not work as planned (it showed two logos on my stick navigation). Because of this, I took out the snippet.

I still cannot get my HOMEPAGE (combisteamcooking.com.au) Sticky navigation to show another logo.

I imported the Site from GP Premium Sites: and it contains the CSS, maybe it is something to do with that?
Please see the CSS below: THANKS.

/* GeneratePress Site CSS */ /* DEFAULTS & OVERRIDES */
/* Subtle fade animation on all hover transitions */
a, img {
  transition: all 200ms linear;
}

.image img {
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.image img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.shadow img {
     position: relative;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    padding: 3px;
    background: white;
}	

/* Specify the weight of strong tag */
strong {
  font-weight: 400;
}

/*  GENERATEPRESS PRIMARY NAVIGATION */
/* Define logo width */
.site-logo {
    width: 140px;
}
/* Add a subtle shadow to pages that don't have a photo hero banner or merged header */
.inside-header {
  box-shadow: 0px 15px 10px -15px #eee;
}
.generate-combined-header .inside-header {
  box-shadow: none;
}

/*  GENERATEPRESS PRIMARY NAVIGATION */
/* Remove the submenu shadow */
.main-navigation ul ul,
.secondary-navigation ul .sub-menu {
  box-shadow: none;
}

/* BEAVER BUILDER # */
/* BEAVER BUILDER GRADIENT ROWS */
/* Class needed for photo overlay gradients on rows. Add .fl-gradient to any photo background row */
/* Essential gradient CSS */
.fl-gradient .fl-row-content-wrap:after {
  content: '';
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
}
.fl-gradient .fl-row-content {
  position: relative;
  z-index: 1;
}
/* Adjust your colours below to change the gradient to match your could scheme */
.fl-gradient .fl-row-content-wrap:after {
  /* fallback for old browsers */
  background: #ED1E79;
  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to left, rgba(45, 156, 219, 0.65), rgba(204, 43, 94, 0.9));
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to left, rgba(45, 156, 219, 0.65), rgba(204, 43, 94, 0.9));
}

/* BEAVER BUILDER POSTS MODULE */
/* Tweak the posts gallery style */
.fl-post-gallery-post {
    border: 1px solid #fff;
    margin: 0;
}
.fl-post-gallery-text {
    padding: 10% 15%;
}

/* BEAVER BUILDER EDITORIAL TYPOGRAPHY TWEAKS */
/* useful text module classes make the paragraph text larger or smaller */
@media (min-width:768px) {
  .text_large {
    font-size: 130%;
  }
}
.text_small {
    font-size: 85%;
}
/* Center all editorial text in mobile views */
@media (max-width:768px) {
  .fl-rich-text *,
  .fl-html {
    text-align: center !important;
  }
}

/* MISC PLUGINS */
/* WP SHOW POSTS */
.wp-show-posts-columns {
  text-align: center;
}
.wp-show-posts-columns article {
  padding-bottom: 10px;
}
.wp-show-posts-columns .wp-show-posts-entry-title {
  font-size: 24px;
  margin-bottom: -10px;
}
.wp-show-posts-inner p {
  font-size: 16px;
  margin: 0 auto;
  max-width: 360px;
}

/* ## SOCIAL WARFARE ## */
/* Add a subtle rounded edge on the Social Warfare shre buttons */
.submit,
.nc_socialPanel {
  border-radius: 6px;
}

/* ## NAVIGATION MENU ITEMS ## */
/* Twitter icon color */
#primary-menu a:not(:hover) .fa-twitter::before {
    color: #55acee;
  color: rgba(85,172,238 ,1);
}

/*  WIDGETS  */
/* Improve the style of recent entries */
.widget_recent_entries li {
  margin-bottom: 10px;
}
.widget_recent_entries .post-date {
color: #666;
  color: rgba(255,255,255,0.6);
  display: block;
  font-size: 85%;
}

/* GENERATEPRESS FOOTER WIDGET AREA */
/* GeneratePress widget layout tweaks & alignments for 3 columns */
@media (min-width:1025px) {
  .footer-widgets .footer-widget-1 {
    text-align: left;
    width: 25%;
  }
  .footer-widgets .footer-widget-2 {
    text-align: left;
    width: 40%;
  }
  .footer-widgets .footer-widget-3 {
    text-align: right;
    width: 35%;
  }
}
@media (min-width:768px) AND (max-width:1024px) {
  .footer-widgets .footer-widget-1,
  .footer-widgets .footer-widget-2,
  .footer-widgets .footer-widget-3 {
    clear: none !important;
    float: left;
    width: 33.3333%;
  }
}
@media (max-width:768px) {
  .footer-widgets .widget {
    float: none;
    margin: 0 auto;
    max-width: 400px;
    padding: 60px 20px 0 20px;
    text-align: center;
  }
}

/* GENERATEPRESS LOWER FOOTER */
/* Bolt icon color */
.fa-bolt {
  color: #F5AB35;
}

/* SPECIAL EFFECTS */
/* Photo contrast hover effect */
.post .post-image:hover img,
.wp-show-posts img:hover,
a:hover .fl-post-gallery-img {
  -webkit-filter: contrast(125%) saturate(0);
  filter: contrast(125%) saturate(0);
  transition: .3s ease-in-out;
} /* End GeneratePress Site CSS */

Hi Jefri,

the link above included some CSS, this needs to be added to the Additional CSS, you can place it above the Site CSS that is already there.