0
Welcome Guest! Login
0 items Join Now

Gantry5/Helium5 responsive logo

    • Bigfly's Avatar
    • Bigfly
    • Rocketeer
    • Posts: 83
    • Thanks: 8
    • New on Rockttheme

    Gantry5/Helium5 responsive logo

    Posted 2 years 1 month ago
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Gantry5/Helium5 responsive logo

    Posted 2 years 1 month ago
    • Your logo is fully responsive. But you can reposition the mobile menu toggle so it does not show on top of it using custom.scss or you can limit the size of your logo in mobile so that the toggle does not go on top of the logo - again using custom.scss

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • Bigfly's Avatar
    • Bigfly
    • Rocketeer
    • Posts: 83
    • Thanks: 8
    • New on Rockttheme

    Re: Gantry5/Helium5 responsive logo

    Posted 2 years 1 month ago
    • MrT wrote:
      Your logo is fully responsive.
      It's not what I see in the screen capture above!MrT wrote:
      you can limit the size of your logo in mobile so that the toggle does not go on top of the logo - again using custom.scss
      Should you help me for that? Any indication?
      Don't worry if it's not possible ;-)!
      Best R
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Gantry5/Helium5 responsive logo

    Posted 2 years 1 month ago
    • Well you're look at something different to me then. The container in which the logo resides is 100% of the browser width in mobile. The logo is shown in full and is scaled to fill that container - therefore it is responsive. The mobile menu toggle is positioned absolute (i.e. in a fixed location relative to the page - in your case this just happens to go over your logo.

      Use this code...
      // Gantry 5 custom CSS file
      
      // import breakpoints
      @import "dependencies";
      
      // Typical values are the default breakpoints set in Gantry 5
      // but these values are user definable in style settings
      // so that is why the code below uses mixins to get the actual 
      // values from Gantry 5 template.
      
      // commonly used media queries
      
      //  typically min 75rem 
      @include breakpoint(large-desktop-range) {
      
      }
      // typically range 60rem to 74.938rem 
      @include breakpoint(desktop-range) {
      
      }
      
      // typically 48rem to 59.938rem
      @include breakpoint(tablet-range) {
      
      }
      // typically 30rem to 47.938rem
      @include breakpoint(large-mobile-range) {
      
      }
      // typically max 30rem
      @include breakpoint(small-mobile-range) {
      
      }
      
      // Less commonly used media queries
      
      // typically min 60rem
      @include breakpoint(desktop-only) {
      
      }
      // typically min 48rem
      @include breakpoint(no-mobile) {
      
      }
      // typically max 47.938 rem
      @include breakpoint(mobile-only) {
          #g-navigation div[id^="logo-"] img {
            max-width: 70%;
          }
          #g-navigation div[id^="logo-"]  {
            text-align: center;
          }
      }
      // typically max 59.938rem
      @include breakpoint(no-desktop) {
      
      }
      
      // Mobile Menu Breakpoint
      @media only all and (max-width: $breakpoints-mobile-menu-breakpoint) { 
      
      }
      
      @import "nucleus/mixins/breakpoints";

      To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .

      Remember to recompile CSS from base outline too.


      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.

Time to create page: 0.052 seconds