Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Mobile Screen Navigation Adjustment

    General Discussion
    3
    9
    396
    Loading More Posts
    • 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.
    • A
      amc last edited by

      Hello!

      I would like to adjust the navigation on the mobile version of my site.

      I added a little CSS and was able to push the Navigation links down using the padding, although now when the navigation is hidden you can still see it cut off at the top of the screen (see below). I would also like to make the whole screen black with the links in the center.

      Thanks for your time!
      Best,
      A
      0_1534245744965_Screen Shot 2018-08-14 at 13.21.23.png 0_1534245754260_Screen Shot 2018-08-14 at 13.21.45.png

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

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

        Thank you!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • A
          amc last edited by amc

          This post is deleted!
          1 Reply Last reply Reply Quote 0
          • A
            amc last edited by

            Hi Marius,

            I have just noticed that the navigation on desktop is not working now :o

            Thanks,
            A

            1 Reply Last reply Reply Quote 0
            • mariusjopen
              mariusjopen Global Moderator last edited by

              Dear @amc

              in the CUSTOMIZER you can change the fontsize etc of the mobile navigation.

              I recommend to use this instead of the Custom CSS:

              Best!

              Marius

              www.mariusjopen.world

              1 Reply Last reply Reply Quote 0
              • edgrbnz
                edgrbnz last edited by

                +1
                For the complete color-overlay and type alignment options in mobile menus.

                ✦ ✦ ✦

                1 Reply Last reply Reply Quote 0
                • A
                  amc last edited by amc

                  Dear @mariusjopen & @edgrbnz Thanks for your messages.
                  When I hide the 'menu bar' this messes up the padding at the top of the navigation. As I don't want a black bar behind the site title and burger.

                  I cannot see where I can make this complete colour overlay either sadly.

                  Thanks in advance!
                  A

                  1 Reply Last reply Reply Quote 0
                  • mariusjopen
                    mariusjopen Global Moderator last edited by

                    Dear @amc

                    1. Your black navbar is not a read navbar.
                      The black is from the background colour which you can see because the LayTheme content gets pushed down with the padding. See here:
                      0_1534759688600_Bildschirmfoto 2018-08-20 um 12.07.06.png

                    2. When you edit the active navigation CSS like this you can make changes:

                    .laynav.mobile-nav.transition.active {
                        background: red !important;
                        height: 100vh;
                    }
                    

                    Or for the list elements:

                    .laynav.mobile-nav.transition.active li {
                        padding-top: 20px;
                    }
                    

                    Best you play around with this a bit :-)

                    Hope I could help!

                    Marius

                    www.mariusjopen.world

                    1 Reply Last reply Reply Quote 0
                    • A
                      amc last edited by

                      Thanks @mariusjopen!
                      I made it work!

                      Cheers
                      A

                      1 Reply Last reply Reply Quote 0
                      • First post
                        Last post

                      Before you post

                      Use the Search Feature. Maybe there is already a solution to your issue.

                      1. Update Lay Theme and all Lay Theme Addons
                      2. Disable all Plugins
                      3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                      4. Now see if your problem solved itself
                      5. Go here, see if your problem is listed here:
                      Troubleshooting

                      When you post:
                      1. Post a link to where the problem is
                      2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                      Thanks!

                      Online Users

                      E
                      A

                      Recent Topics

                      • A

                        Unable to update lay theme / to login wp admin

                      • A

                        New button feature not available

                      • S

                        Theme crashed - because of Polylang?

                      • A

                        carousel addon not working after update

                      laytheme.com