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. Project-navigation link in menu

Project-navigation link in menu

Scheduled Pinned Locked Moved General Discussion
6 Posts 2 Posters 352 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.
  • X Offline
    X Offline
    XLD
    wrote on last edited by
    #1

    Hey,

    is it possible to add the „Next Project“ and „Previous Project“ links to the menu?

    Thanks in advance!

    Best,
    AD

    1 Reply Last reply
    0
    • RichardR Offline
      RichardR Offline
      Richard
      Global Moderator
      wrote on last edited by
      #2

      Dear AD @XLD

      Unfortunately, just adding the link's directly into the menu from " appearance - menu's " I believe is not an option ?

      However i can think of some workaround using the option's that Lay Theme does provide.
      They all involve some basic 'Custom HTML or CSS' if you are familiar with these.

      For information regarding CSS.
      https://laytheme.com/documentation.html#custom-css-styling

      Option: Forcing the Next/Prev "project arrows" into the menu bar.

      Screen Shot 2020-09-25 at 11.54.44 AM.png

      Activating the project arrows within "Lay Options" we can then go to our 'Customize' section and change the arrows to text ( they can be image or arrow if you prefer ), and we will set the position to top.

      Screen Shot 2020-09-25 at 12.06.54 PM.png Screen Shot 2020-09-25 at 12.05.19 PM.png

      Now using our inspection tool:
      https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools

      We can see the prev/next links and the information about their positions:

      Screen Shot 2020-09-25 at 12.09.34 PM.png

      We can use our own Custom CSS to set the link where we want ( in this case up in the menu ). This can be done by adding code into "Lay Options - Custom CSS & HTML"
      Screen Shot 2020-09-14 at 2.51.54 PM.png

      So for example i could add code similar to this:

      .project-arrow.pa-next {
          top:6px;
          right:10%;
          z-index:11;
      }
      
      .project-arrow.pa-prev {
          top:6px;
          left:76%;
          z-index:11;
      }
      

      By adding this code i have created a menu like this ( very basic ) :

      Screen Shot 2020-09-25 at 12.19.05 PM.png

      I hope this helps you AD

      Best wishes and good luck

      Sincerely
      Richard

      X 1 Reply Last reply
      0
      • RichardR Richard

        Dear AD @XLD

        Unfortunately, just adding the link's directly into the menu from " appearance - menu's " I believe is not an option ?

        However i can think of some workaround using the option's that Lay Theme does provide.
        They all involve some basic 'Custom HTML or CSS' if you are familiar with these.

        For information regarding CSS.
        https://laytheme.com/documentation.html#custom-css-styling

        Option: Forcing the Next/Prev "project arrows" into the menu bar.

        Screen Shot 2020-09-25 at 11.54.44 AM.png

        Activating the project arrows within "Lay Options" we can then go to our 'Customize' section and change the arrows to text ( they can be image or arrow if you prefer ), and we will set the position to top.

        Screen Shot 2020-09-25 at 12.06.54 PM.png Screen Shot 2020-09-25 at 12.05.19 PM.png

        Now using our inspection tool:
        https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools

        We can see the prev/next links and the information about their positions:

        Screen Shot 2020-09-25 at 12.09.34 PM.png

        We can use our own Custom CSS to set the link where we want ( in this case up in the menu ). This can be done by adding code into "Lay Options - Custom CSS & HTML"
        Screen Shot 2020-09-14 at 2.51.54 PM.png

        So for example i could add code similar to this:

        .project-arrow.pa-next {
            top:6px;
            right:10%;
            z-index:11;
        }
        
        .project-arrow.pa-prev {
            top:6px;
            left:76%;
            z-index:11;
        }
        

        By adding this code i have created a menu like this ( very basic ) :

        Screen Shot 2020-09-25 at 12.19.05 PM.png

        I hope this helps you AD

        Best wishes and good luck

        Sincerely
        Richard

        X Offline
        X Offline
        XLD
        wrote on last edited by
        #3

        @Richard-Keith

        Thanks for your fast and comprehensive reply, Richard.
        This helps a lot!

        Just one more question:
        Is it possible to add the „hide when scrolling down“ / „show again on mouseover“ functionality as well?

        Best regards,
        Axel

        1 Reply Last reply
        0
        • RichardR Offline
          RichardR Offline
          Richard
          Global Moderator
          wrote on last edited by
          #4

          Dear Axel @XLD

          Not directly from the standard menu options.
          This will have to be done with CSS & JS added into 'Custom CSS & HTML'

          https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp

          Also to remember that we must put our javascript into a "newpage event" for it to function within Lay Theme:

          https://laytheme.com/documentation.html#custom-javascript

          I apologise that i cannot go deeper into showing you the whole process, there is a lot of great content and help online for achieving what you wish, so keep trying! :)

          Best of Luck

          Sincerely
          Richard

          X 1 Reply Last reply
          0
          • RichardR Richard

            Dear Axel @XLD

            Not directly from the standard menu options.
            This will have to be done with CSS & JS added into 'Custom CSS & HTML'

            https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp

            Also to remember that we must put our javascript into a "newpage event" for it to function within Lay Theme:

            https://laytheme.com/documentation.html#custom-javascript

            I apologise that i cannot go deeper into showing you the whole process, there is a lot of great content and help online for achieving what you wish, so keep trying! :)

            Best of Luck

            Sincerely
            Richard

            X Offline
            X Offline
            XLD
            wrote on last edited by
            #5

            @Richard-Keith Thanks Richard!

            1 Reply Last reply
            0
            • RichardR Offline
              RichardR Offline
              Richard
              Global Moderator
              wrote on last edited by
              #6

              Dear @XLD

              Best :)

              Rich

              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
              alasdair17
              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