Single page scrolling websites

Beaver Builder
1

I have a multi-page website created with Beaver Builder that I’d like to convert to a single page scrolling webpage. Something a bit like this…

http://www.wer-music.com/

Do you have links to any articles that explain how to do this.

I’d also like to know how to change the layout of the menu so it sits at the top rather than where it currently is on my website…

http://www.callyofficial.com/

Thanks in advance!

Ian

2

Hi Ian,

This plugin will get you the smooth scroll to the menu items:

https://wordpress.org/plugins/page-scroll-to-id/

The instructions initially caused me to scratch my head, but once I “got it”, things went fine. The key point to remember with it is that your current menu items are REPLACED by menu items of the LINK type, with the same name as the originals.

You then set up each BB row for each menu item and give it an ID that you match with the menu item. If you hover over the Artists menu item in the example site you posted, you will see that the URL is set up with domain/#artists. The hash character is the anchor and the text is the ID that that section was set to.

Not sure how to swap the menu bar to the top with the BB theme; someone else here could help with that.

Cheers!
Lyle

3

Hi Ian,

Just as an update, I have posted a video on how to do the one page website with smooth scroll. However, the theme used is DWB and not BB, but the menu/link setup would be the same as would the BB portion :slight_smile:

One Page Website with Smooth Scroll
Cheers!
Lyle

4

Hey Lyle,

Thanks for jumping in! :slight_smile:

Ian,

More to what Lyle said above, you can check the Smooth Scroll KB article we have on the link below.
http://forum.wpbeaverbuilder.com/knowledge-base/smooth-scrolling-buttons-icons-and-links/

Unfortunately, there is no setting to move the menu to the top position - we need to change the code on the theme files to achieve that. We do have a Top Bar portion on the header to which you can place your menu unto. Does that work for you?

Ben

5

Thanks for the info guys. This will definitely help me.

Ben, it sounds like making the top bar the menu would work. How would you go about doing this? And if you do this can you simply remove the current menu bar so it disappears completely, so then I just have the top bar menu, then my page beneath?

6

Hey Ian,

You can set it under Theme Customizer > Header > Top Bar Layout. We can hide the primary header menu via custom CSS. The snippet below should do the trick!

.fl-page-nav-wrap {
  display: none;
}

Ben

7

Thanks for that info Ben. Using the method you’ve suggested is it possible to have a logo next to the menu in the top bar? Take a look at the example here to see what I mean…

http://www.wer-music.com/

Also where would the custom CSS text go? I’m quite new to WP and BB so I’m not sure how to do anything other than drag & drop.

8

Hi Ian,

Unfortunately, the Top Bar doesn’t support the addition of a logo. However, you can set the Top bar to have two columns. Once being a menu and the other to be text.

In the text option, add the following code:

<div class="fl-page-header-logo" itemscope="itemscope" itemtype="http://schema.org/Organization">
  <a href="ADD LINK TO SITE HERE" itemprop="url">
    <img class="fl-logo-img" itemscope="" itemtype="http://schema.org/ImageObject" src="ADD IMAGE URL HERE" alt="ALT TEXT HERE">
  </a>
 </div>

Replace the following statements in the code above:

  • ADD LINK TO SITE HERE = Replace this with your website's URL i.e. your homepage link.
  • ADD IMAGE URL HERE = Replace this with the URL to your logo image.

Please, note that some additional styling may be required, in regards to your menu.

Thanks,
Danny

9

Thanks for the info Danny!

10

No problem, Ian.

Thanks,
Danny