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 align left, and commas between desktop menu points

Mobile menu align left, and commas between desktop menu points

Scheduled Pinned Locked Moved General Discussion
11 Posts 4 Posters 1.1k 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.
  • M Offline
    M Offline
    mike
    wrote on Mar 2, 2017, 9:27 AM last edited by arminunruh Mar 2, 2017, 11:29 AM
    #1

    Hi Armin

    Hope you can help. I would like to align the mobile / tablet menu text left rather than the default centred. I see in the 'customiser' there is a way to align the site title left but not the menu. I have tried to work this out with custom css but not managed it. Could you point me in the right direction?

    Also I have commas in between my menu items. You posted a way to do this on the forum without need to include this in the menu text itself. I have searched and searched but can't find this original post. Could you remind me?

    Once again thanks for your help and all the efforts with Lay theme.

    Best

    Mike

    1 Reply Last reply
    0
    • A Offline
      A Offline
      arminunruh
      Global Moderator
      wrote on Mar 2, 2017, 4:28 PM last edited by arminunruh Mar 6, 2017, 10:04 AM
      #2
      nav.primary li a{
      text-align: left;
      }
      

      That will align the text to the left :). Put it in "lay options" -> "custom css & html" -> "custom css for mobile version".

      You can have commas between menu points with this css (in "Custom CSS for Desktop Version"):

      li:after{
          content: ',';
          display: inline;
      }
      
      li:last-child:after{
          display: none;
      }
      
      T 1 Reply Last reply May 14, 2019, 7:22 PM
      0
      • M Offline
        M Offline
        mike
        wrote on Mar 2, 2017, 10:45 PM last edited by
        #3

        Awesome thanks so much!

        1 Reply Last reply
        0
        • M Offline
          M Offline
          mike
          wrote on Mar 3, 2017, 9:15 AM last edited by
          #4

          Just a note: In point 1 I think there is a stray '.' before 'nav.primary' that's not needed.

          M

          1 Reply Last reply
          0
          • M Offline
            M Offline
            mike
            wrote on Mar 3, 2017, 9:28 AM last edited by
            #5
            This post is deleted!
            1 Reply Last reply
            0
            • A arminunruh
              Mar 2, 2017, 4:28 PM
              nav.primary li a{
              text-align: left;
              }
              

              That will align the text to the left :). Put it in "lay options" -> "custom css & html" -> "custom css for mobile version".

              You can have commas between menu points with this css (in "Custom CSS for Desktop Version"):

              li:after{
                  content: ',';
                  display: inline;
              }
              
              li:last-child:after{
                  display: none;
              }
              
              T Offline
              T Offline
              tizi
              wrote on May 14, 2019, 7:22 PM last edited by
              #6

              @arminunruh is it possible that point 2 doesn't work anymore if I use multiple menus? i also tried the same code but with "nav.second_menu" in front of "li" but it somehow doesnt seem to work ...

              1 Reply Last reply
              0
              • M Offline
                M Offline
                mariusjopen
                Global Moderator
                wrote on May 15, 2019, 9:35 AM last edited by
                #7

                Dear @tizi
                can you post a link to your website?

                Best!

                Marius

                www.mariusjopen.world

                T 1 Reply Last reply May 15, 2019, 10:01 AM
                0
                • M mariusjopen
                  May 15, 2019, 9:35 AM

                  Dear @tizi
                  can you post a link to your website?

                  Best!

                  Marius

                  T Offline
                  T Offline
                  tizi
                  wrote on May 15, 2019, 10:01 AM last edited by
                  #8

                  @mariusjopen http://efeubijoux.ch/home -> its still very rough, I just startet. but I wanted to have a "/" between ANGEBOT and KOLLEKTION and so on ...

                  1 Reply Last reply
                  0
                  • M Offline
                    M Offline
                    mariusjopen
                    Global Moderator
                    wrote on May 17, 2019, 10:36 AM last edited by
                    #9

                    Dear @tizi
                    you can sue CUSTOM CSS and have a look here:
                    https://stackoverflow.com/questions/27836769/comma-separated-spans-with-pure-css

                    Best!
                    Marius

                    www.mariusjopen.world

                    1 Reply Last reply
                    1
                    • T Offline
                      T Offline
                      tizi
                      wrote on May 17, 2019, 1:35 PM last edited by
                      #10

                      thanks for your answer! I worked it out now.
                      I found the hint i was looking for within another entry (http://laythemeforum.com:4567/topic/671/separate-menu-items-by-commas-instead-of-spacing/13) and solved it with:

                      nav.primary a:after {
                      content: " /" !important;
                      }

                      .menu-item-59 a:after {
                      display: none;
                      }

                      nav.third_menu a:after {
                      content: " /" !important;
                      }

                      .menu-item-210 a:after {
                      display: none;
                      }

                      nav.fourth_menu a:after {
                      content: " /" !important;
                      }

                      .menu-item-122 a:after {
                      display: none;
                      }

                      thanks!
                      tizi

                      1 Reply Last reply
                      0
                      • M Offline
                        M Offline
                        mariusjopen
                        Global Moderator
                        wrote on May 19, 2019, 6:34 PM last edited by
                        #11

                        Dear @mike
                        super good!!! :-D
                        Thank you for sharing!

                        Marius

                        www.mariusjopen.world

                        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
                        A
                        axmannrottler
                        2 minutes ago
                        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