Layer mobile navigation – colour change

  • Resolved floydman

    (@floydman)


    10 years, 3 months ago

    Dear Ben,
    at first what a great theme. Thanks for all your work you put in the development of tracks. Great and responsive.

    I′m working with a child theme. I have two questions:

    1. Is there a way to change the background colour of the layer that is faded in, when the navigation icon (cheeseburger) is touched? It is black and I found the following style definition:

    .menu-primary, .menu-primary-tracks {
    background: #CCC; // this is the colour I want to change it to
  }

    So there is the problem, that the background colour is visible on all resolutions. I just want the colour grey, when the layer with the navigation opens on a mobile device.

    2. Where do I find the META part on a single post? I want to delete it, because for me there is no need for it. Do I have to remove the code from the template file?

    Thanks in advance for your great work and support. Wonderful.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter floydman

    (@floydman)

    Sorry, I just found the widget for the Meta entry. So I just need some help with the navigation layer colour ??

    Thanks for your help.

    Theme Author Ben Sibley

    (@bensibley)

    Thanks for the kind words ??

    The following CSS will change the mobile menu to white when open:

    .menu-primary,
.menu-primary-tracks {
  background-image: linear-gradient(#fff 24px, transparent 24px, transparent 48px);
}

    You can copy and paste that code into the “Custom CSS” section in the Customizer (Appearance > Customize). Once added there, it should take affect right away.

    I made the background white, so you will definitely be sure if it’s working. The only part that you want to change is the “#fff”. The code written like this will also only affect the mobile menu.

    Thread Starter floydman

    (@floydman)

    Thanks Ben for your quick response. Worked like a charme. Just one more question about the mobile navigation: Is it possible to delete the “/” between navigation points just in the mobile view? Or is there a way that it isn′t shown this way:

    Navigation 1
    /
    Navigation 2
    /

    My desired result should be:

    Navigation 1
    Navigation 2
    Navigation 3

    If this isn′t possible: is there a way to optimize the margin/padding between the navigation points, so that there is less space between in the mobile view?

    Once again, thanks for your great support.

    Theme Author Ben Sibley

    (@bensibley)

    Hmm there shouldn’t be a “/” divider at mobile width. Here’s the Tracks demo for reference: https://www.competethemes.com/tracks-live-demo/.

    Has it always been this way on your site? If you can’t figure out what’s causing it, please share a link to your site and I’ll take a look.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Layer mobile navigation – colour change’ is closed to new replies.