[Support request] Change color of mobile menu

Home Forums Support [Support request] Change color of mobile menu

Home Forums Support Change color of mobile menu

  • This topic has 5 replies, 3 voices, and was last updated 4 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2178046
    Jesse

    Hello,

    How do I change the background color of my mobile menu in only the area where the red box is? I want to make it green. And I want the nav links to be white.

    When I changed the navigation color under the colors settings in the customizer, it made the entire nav green (like even where the logo is located and on the desktop view too).

    Best regards,
    Jesse

    #2178090
    Fernando
    Customer Support

    Hi Jesse,

    To achieve such, you may try adding this CSS in Appearance > Customize > Additional CSS:

    div#mobile-menu {
        background-color: #ff0000;
    }
    
    div#mobile-menu a {
        color: #fff;
    }

    Kindly replace #ff0000 and #fff with your preferred color values: https://htmlcolorcodes.com/color-picker/

    Hope this helps! ๐Ÿ™‚

    #2178323
    Jesse

    Thanks, Fernando!

    How would I add my social follow icons to the bottom of that mobile menu where the red circle is?

    Currently, the social follow icons that I want to add to the mobile menu can be seen in my footer, in case you need to see them. I just want those to appear in the mobile menu too.

    Best regards,
    Jesse

    #2178335
    Fernando
    Customer Support

    Hi Jesse,

    You can achieve this easily through using an Off canvas menu instead. This can be found in Appearance > Customize > Layout > Off Canvas Panel.

    See: https://docs.generatepress.com/article/off-canvas-panel-overview/

    After doing so, you can add Widgets through Appearance > Widgets as such: https://share.getcloudapp.com/p9u6NKKZ

    Alternatively, with your current menu, you can also try adding icons as such: https://docs.generatepress.com/article/adding-icons-to-menu-items/#floating-the-icon-to-the-right

    Hope this clarifies. ๐Ÿ™‚

    #2178548
    Jesse

    Hi Fernando,

    The issue is that I want to add those social follow icons to the mobile menu only. I don’t need/want them to show up in the primary menu for non-mobile view.

    Best regards,
    Jesse

    #2178593
    David
    Staff
    Customer Support

    Hi there,

    what Fernando is suggesting is to use the Off Canvas Panel for your mobile menu: https://docs.generatepress.com/article/off-canvas-panel-overview/

    As the default mobile menu does not have a hook or a widget for you to add the icons. Whereas the off canvas menu does support them.

    Is the Off Canvas panel an option ?

    If it isn’t then we can look at other methods that are gonna feel rather hackish…

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