0
Welcome Guest! Login
0 items Join Now

SOLVED Responsive Menu background color (panel)

Last Post
Search Topic
    • Edith's Avatar
    • Edith
    • Newbie
    • Posts: 10
    • Thanks: 0

    SOLVED Responsive Menu background color (panel)

    Posted 10 years 1 week ago
    • Hi there I hope anyone with a good heart and a beeter knowledge than me can help me with this:

      www.awesomescreenshot.com/image/190045/c...5a40cff7ffa64d1bbc81

      I want to change the background color of the panel responsive menu, I've been trying to find the attributes or classes to affect that but it affects my "normal" menu (I mean the no collapsable)

      So if anyone of you could tell me how can I change the background to make the white text of the menu can have a good contrast maybe a red or black would be better than gray...

      Thanks for reading this...
    #1199472
    • Damir's Avatar
    • Damir
    • Preeminent Rocketeer
    • Posts: 22450
    • Thanks: 2679
    • Web Developer

    Re: SOLVED Responsive Menu background color (panel)

    Posted 10 years 1 week ago
    #1199478
    • Edith's Avatar
    • Edith
    • Newbie
    • Posts: 10
    • Thanks: 0

    Re: SOLVED Responsive Menu background color (panel)

    Posted 10 years 1 week ago
    • Thanks for you reply I'm adding the url so you can see thanks in advance
    #1199748
    • Damir's Avatar
    • Damir
    • Preeminent Rocketeer
    • Posts: 22450
    • Thanks: 2679
    • Web Developer

    Re: SOLVED Responsive Menu background color (panel)

    Posted 10 years 1 week ago
    • One question did you alter any of the template files?

      Try this code add it to your custom css file:
      @media (max-width: 767px) {
    .layout-mode-responsive .gf-menu-device-wrapper-sidemenu {
      background: #FF0835;
    }

    .layout-mode-responsive .gf-menu-device-container .gf-menu {
      background-color: #FF0835;
      border-top: 15px solid #FF0835;
      border-bottom: 15px solid #FF0835;
    }

    .layout-mode-responsive .gf-menu-device-container .gf-menu ul, .layout-mode-responsive .gf-menu-device-container .gf-menu ol, .layout-mode-responsive .gf-menu-device-container .gf-menu > li:first-child, .layout-mode-responsive .gf-menu-device-container .gf-menu > li.active:first-child, .layout-mode-responsive .gf-menu-device-container .gf-menu > li:last-child, .layout-mode-responsive .gf-menu-device-container .gf-menu li ol > li:last-child, .layout-mode-responsive .gf-menu-device-container .gf-menu li .columns-1 > .col1 > ul > li:last-child, .layout-mode-responsive .gf-menu-device-container .gf-menu li .columns-2 > .col2 > ul > li:last-child, .layout-mode-responsive .gf-menu-device-container .gf-menu li .columns-3 > .col3 > ul > li:last-child, .layout-mode-responsive .gf-menu-device-container .gf-menu li .columns-4 > .col4 > ul > li:last-child {
      background-color: #FF0835 !important;
    }
}

      To create a custom CSS file, you just have to create a new css file at /templates/[TEMPLATE]/css/ and name it [TEMPLATE]-custom.css. The new custom CSS file will automatically get loaded by the Gantry framework.

      NOTE: The use of [TEMPLATE] in this guide is intended as a placeholder for the name of the template's primary directory. Replace [TEMPLATE] with the template directory name in order for these instructions to work with your site.
      www.gantry-framework.org/documentation/j...custom_stylesheet.md

    • The following users have thanked you: Edith

    • Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
    #1200114
    • Edith's Avatar
    • Edith
    • Newbie
    • Posts: 10
    • Thanks: 0

    Re: SOLVED Responsive Menu background color (panel)

    Posted 10 years 1 week ago
    • Thank you very much, those attributes fits great! Have a great day!
    #1201314

Time to create page: 0.073 seconds