Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Mobile Menu Color based on current project/page

Mobile Menu Color based on current project/page

Scheduled Pinned Locked Moved General Discussion
5 Posts 2 Posters 883 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • dafvD Offline
    dafvD Offline
    dafv
    wrote on last edited by arminunruh
    #1

    Daniel asked how to change mobile menu colors based on the current page. I accidentally edited his post sry
    Armin

    1 Reply Last reply
    0
    • arminunruhA Online
      arminunruhA Online
      arminunruh
      Global Moderator
      wrote on last edited by
      #2

      Hey! Here is some CSS :D

      /*top bar*/
      .navbar{
      	background-color:rgba(255,255,255,0.5);
      	border-bottom-color: green;
      }
      
      /*burger icon*/
      .burger span, .burger span:before, .burger span:after{
      	background-color: pink;
      }
      
      /*menu points border*/
      nav.primary li a{
      	border-bottom-color: yellow;
      }
      
      /*menu points text*/
      nav.primary a{
      	color: aqua;
      }
      
      /*menu points background*/
      nav.primary li>a{background-color:rgba(255,0,255,0.5)}
      
      /*current menu point*/
      nav.primary li.current-menu-item>a{background-color:rgba(0,0,255,0.5)}
      

      Of course you need to put your page specific selector in front of each selector above. So it would be:

      body[data-type="page"][data-id="20"] .burger span:before,
      body[data-type="page"][data-id="20"] .burger span:after{
         background-color: pink;
      }
      
      dafvD 1 Reply Last reply
      0
      • arminunruhA arminunruh

        Hey! Here is some CSS :D

        /*top bar*/
        .navbar{
        	background-color:rgba(255,255,255,0.5);
        	border-bottom-color: green;
        }
        
        /*burger icon*/
        .burger span, .burger span:before, .burger span:after{
        	background-color: pink;
        }
        
        /*menu points border*/
        nav.primary li a{
        	border-bottom-color: yellow;
        }
        
        /*menu points text*/
        nav.primary a{
        	color: aqua;
        }
        
        /*menu points background*/
        nav.primary li>a{background-color:rgba(255,0,255,0.5)}
        
        /*current menu point*/
        nav.primary li.current-menu-item>a{background-color:rgba(0,0,255,0.5)}
        

        Of course you need to put your page specific selector in front of each selector above. So it would be:

        body[data-type="page"][data-id="20"] .burger span:before,
        body[data-type="page"][data-id="20"] .burger span:after{
           background-color: pink;
        }
        
        dafvD Offline
        dafvD Offline
        dafv
        wrote on last edited by
        #3

        @arminunruh said:

        /menu points text/
        nav.primary a{
        color: aqua;
        }

        /menu points background/
        nav.primary li>a{background-color:rgba(255,0,255,0.5)}

        Thank you so much Armin! My code was a little bit messy...
        Could you help me with something else?

        I am trying to make the mobile navbar with transparent background (the content starting at 0vh) and when clicking the burger the project titles would appear fullscreen with black background.

        I am having some issues with the last part...
        Can you help me?

        Thanks ;)

        1 Reply Last reply
        0
        • arminunruhA Online
          arminunruhA Online
          arminunruh
          Global Moderator
          wrote on last edited by
          #4

          hey daniel!

          Hmm this is not really easily possible :/
          But it's a nice idea and I might include more options for mobile menus one day

          1 Reply Last reply
          0
          • dafvD Offline
            dafvD Offline
            dafv
            wrote on last edited by
            #5

            that would be awesome ;)

            1 Reply Last reply
            0
            Reply
            • Reply as topic
            Log in to reply
            • Oldest to Newest
            • Newest to Oldest
            • Most Votes


            I also code custom websites or custom Lay features.
            šŸ’æ Email me here: šŸ’æ
            info@laytheme.com

            Before you post:
            1. When using a WordPress Cache plugin, disable it or clear your cache.
            2. Update Lay Theme and all Lay Theme Addons
            3. Disable all Plugins
            4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

            This often solves issues you might run into

            When you post:
            1. Post a link to where the problem is
            2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
            3. If the problem is difficult to explain, post screenshots / link to a video to explain it
            Online Users
            arminunruhA
            arminunruh
            F
            francesco
            L
            lurchifon
            Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
            laytheme.com
            • Login

            • Don't have an account? Register

            • Login or register to search.
            • First post
              Last post
            0
            • Recent
            • Tags
            • Popular
            • Users
            • Search