spy scroll menu

[Leonardo da Vinci+ 3]

Hi guys,

 

I hope you are OK

 

Please can you help me for how to build a spy scroll menu in PageLines DMS , I tried to use the instruction in PageLines DMS Doc and put the cods and all things cool but how to link the menu with section like when I click on home bottom take me to home section and so on , I use all section in a one page like 

Welcome section

About us section

what we do section

 

I mean like a singe page websites 

 

Thanks 

[atcdomainsolutions+ 63]

Hi guys,

 

I hope you are OK

 

Please can you help me for how to build a spy scroll menu in PageLines DMS , I tried to use the instruction in PageLines DMS Doc and put the cods and all things cool but how to link the menu with section like when I click on home bottom take me to home section and so on , I use all section in a one page like 

Welcome section

About us section

what we do section

 

I mean like a singe page websites 

 

Thanks 

Well, once you add the Scroll Spy widget, you need to add your  names to the areas of the page you want it to scroll to.

 

The code you add looks like this:

 

<h1 class="scroll-header" title="Web Design">PUT ANY TEXT HERE YOU WANT OR LEAVE BLANK IF YOU WANT A BLANK ANCHOR</h1>

 

<h1 class="scroll-header" title="Webmaster/SEO Services"></h1>

 

The bold and underline parts above are what you change to whatever you want to name it.  Whatever you add there will populate the Scroll Spy and when that name is clicked on the Scroll Spy, it will move to that section.  I added the codes above to my Highlight widgets that I added RIGHT ABOVE the area that I wanted it to go to.  I purposely did not fill out anything between the h1 and /h1 tags since I didn't want any text to appear there.

 

My site this is on is http://atcdomainsolutions.com

[Leonardo da Vinci+ 3]

thanks

 you rock!  perfect!

but how can change the color of spy menu or can

[batman 389]

Hi

You need add a CSS rules at your Custome Code

 

This is the "original colors" 

 

 

.spynav {

    background-color: rgb(232, 232, 232);

    background-image: -moz-linear-gradient(center top , rgb(246, 246, 246), rgb(212, 212, 212));

    background-repeat: repeat-x;

    border: 1px solid rgb(186, 186, 186);

    box-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4) inset;

    border-radius: 4px 4px 4px 4px;

    -moz-box-sizing: border-box;

}

 

For example I change this and add this code to my test web

 

 

.spynav {

    background-color: red);

    background-image: none;

    background-repeat: repeat-x;

    border: 1px solid rgb(186, 186, 186);

    box-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4) inset;

    border-radius: 4px 4px 4px 4px;

    -moz-box-sizing: border-box;

}

 

 

You can change it as you like, see the image

 

 

http://screencast.com/t/3ZcAhmQlg

[Leonardo da Vinci+ 3]

Thanks a lot , It is amazing 

 

But if we have sub-title like 3 subtitle in one section , how can we add them in spy menu under main title ?

 

Home

services

+about

  - FAq

  -About us 

  - contact us 

[James B 436]

Do you mean so the titles displaying in the scrollspy nav section appear in a dropdown? If so then scrollspy wouldn't be able to do that out of the box unfortunately, it automatically picks up the titles from the html tags you place within the page and inserts them in to the scrollspy menu.

[Leonardo da Vinci+ 3]

Thanks a lot