Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Support request] Sticky Navigation Logo Change

Home Forums Support [Support request] Sticky Navigation Logo Change

Home Forums Support Sticky Navigation Logo Change

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #573768
    Jefri

    Hi guys,
    The website is combisteamcooking.com.au

    How do I change the sticky navigation logo on desktop? Thank you.

    #573859
    David
    Staff
    Customer Support

    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.

    #575104
    Jefri

    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

    #575114
    David
    Staff
    Customer Support

    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

    #577699
    Jefri

    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 */
    #577831
    David
    Staff
    Customer Support

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.