Docs

[Daberechi]

Basically I dont want my one pager menu to replace my main menu. I want to achieve something like this http://getbootstrap.com/css/#overview where they have the menu by the side or just at the top of the page

[Paul R]

Hi,

You can add your one page menu to your sidebar via widgets.

Please see screenshot – http://screencast.com/t/ruX5Kq86

Hope that helps.

[Daberechi]

I want several of my pages to use one page navigation, this is better because I don’t want to create several pages and have more sub pages.
However if I create a one page navigation menu where I have the menu pointing to sections with the id #first #second #third on one page, would the menu navigation work on a different page where I’ve given the sections the same id?

If not then that means I’d have to create a different menu for each page? And this is impossible as I’m only allowed three menus in my theme.

So is it possible to create anchor tags at the top of my page without having to make use of the menu. I could create the tags with the use of Raw Content element in cornerstone and make them point to the ids I’ve created on the page? Does that work? If not is there a way I can make this work? I currently tried to work this out here:

<a href="#first">How we help clients</a> &nbsp; 
<a href="#second">Our Insights</a> &nbsp;
<a href="#third">People</a>

[Daberechi]

<a href="#first">How we help clients</a> &nbsp; 
<a href="#second">Our Insights</a> &nbsp;
<a href="#third">People</a><code></code><code></code>

[Joao]

Hi There,

Yes that would work.

It is not recommendable to have an ID used multiple times. So keep a different ID to every element on the same page. On different pages, no problem.

Hope it helps

Joao

[Daberechi]

Okay thanks. So how do I make it change color according to the section that is Active.
Also how do I remove the title of my page?
Is it possible to make the section where I have the links to be visible even when I scroll down to a different section? Currently when I click on a link, it goes to that section (which is fine) but I don’t see the link options anymore.

Or do you reckon I do this by making it a sidebar where it’s always seen on the page? And if so how do I go about this?

Please provide options to both questions if possible

[Joao]

Hi There,

To have your links to change color as you scroll you would have to use one page navigation menu. It could be possible to do with the on-page menu alike links you create but that would involve custom development that would be out of the scope of out support, same for the sidebar I believe.

If you have further questions provide your URL

Thanks

Joao

[Daberechi]

Well, Im just trying to make my div sticky. And it seems as though he got his answer in relation to a sticky top bar. https://community.theme.co/forums/topic/sticky-topbar/

Ive tried implementing some code to make my div stick to the top but it doesnt seem to work. The code given in the link above seems to be a global solution. I only want to be able to implement mine on select pages.

This is the code im working with

 var $window = $(window),
       $stickyEl = $('#the-sticky-div'),
       elTop = $stickyEl.offset().top;

   $window.scroll(function() {
        $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
    });

 #the-sticky-div.sticky {
     position: fixed;
     top: 0;
  }

however, when i give my div the sticky class it disappears.

[Paul R]

Hi,

You can add your code in Cornerstone > Settings > Custom Javascript and Cornerstone > Settings > Custom CSS
if you would like the code to affect only that page.

With regards to disappearing, you can try adding z-index to your code.

eg.

 #the-sticky-div.sticky {
     position: fixed;
     top: 0;
     z-index:999999;
}

Hope that helps.

[Daberechi]

Thank you. That helped. however, the block now shifts to cover part of my menu as seen in the screenshot attached. I suspected that it might be due to the code
top: 0;
but when removed, my div doesnt act the way its supposed to. It sticks, but it shows text after youve scrolled past it. how do i fix this?

[Rue Nel]

Hello There,

Thanks for updating in! Please try to increase the top: 20px or equivalent to the height of the main menu. If nothing else helps, would you mind provide us with your URL so that we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

[Daberechi]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for providing the information. I wasn’t able to replicate the issue. Upon checking I noticed that there is a JS error in your code. Please make use of this code instead:

(function($){
   var $window = $(window),
       $stickyEl = $('#the-sticky-div'),
       elTop = $stickyEl.offset().top;

   $window.scroll(function() {
        $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
    });
})(jQuery);

Please let us know how it goes.

[Daberechi]

Thank you for the correction. It does stick but my problem is that I can still see the text when I scroll past it, because the div is transparent. Is it possible for me to include these links in an opaque div that covers the entire top of that page so that when I scroll I don’t see the text after I scroll past it?
If so how do I go about it?

[Christopher]

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[Author]

Posts