Header customisation

BB Theme
1

Hi

I’m using a beaver builder theme on my site: http://d00.0c4.myftpupload.com/

To make changes to the header I seem to have to leave the plug in and use the wordpress customise tool.

I’m trying to do the following, but can’t figure out how. Any help would be greatly appreciated!

  1. Have the links smooth scroll to different parts of the page. I’ve looked at the smooth scrolling knowledge article, but this only seems to work for links within the page builder tool. How do I get the links in the header to go to different parts of the page?

  2. Make the buy link into a button, instead of just text (like apple do on their pages). How can I do that?

  3. Make header transparent

  4. Move the logo left slightly so that it aligns with the text in the first column of the main page

Thanks again for your help

2

Hey James,

Welcome to the BB forums! :slight_smile:

Sorry, I can’t seem to see the site as it’s password protected. I’ll try to answer your questions regardless.

  1. You just need to edit the links that you have on the header. Under Appearance > Menu. Add a Custom Link, change the URL to reflect the ID of the element you want to scroll to then place a Menu Name.
  2. We have a Button module that you can use.
  3. You can follow this KB article. It requires a bit of CSS
  4. We'll need to see the page first. :)

You can provide the password to view your site using the private reply option below.

Ben

3

Thanks for the quick reply! And for the link advice, which worked a treat :slight_smile:

The site is now public - sorry about that.

For the buy button, how do I get it in the header? I’ve been able to create a buy button further down the page.

To make the header transparent, where do I put the CSS code that the article provided? Do I use a CSS plugin, or is there something else I need to do?

4

Hey James,

I can see what you meant by the Buy button now. Check the KB article on how to do that. :slight_smile:
http://forum.wpbeaverbuilder.com/knowledge-base/buttons-in-navigation-menu/

Since you’re using the BB theme, you can place CSS codes directly under Appearance > Code > CSS Code.

Ben

5

That buy button code is fantastic - thanks!

Is there any code I can add to give it a gradient finish, so it matches the button modules of the main page builder, like the one further down my page?

6

Hey James,

You can use an online Gradient CSS Generator. I’ve used the one below before and it works fine.
http://www.colorzilla.com/gradient-editor/

The generator above will give you a bunch of background values(for browser compatibility), simply copy all the code from there, and replace it with the previous background-color that you got from the KB article code.

Ben

7

Hi Ben - the custom links worked a treat for the smooth scrolling. However, now I’ve got a couple of sub pages, they don’t work from those pages. Is there anything I can add so the links work from my sub pages?

Thank you!

8

Hey James,

Can you share the URL of the site in question so we can take a look?

Ben

9

Sure - it’s these subpages:

http://d00.0c4.myftpupload.com/home/acknowledgements/

http://d00.0c4.myftpupload.com/home/privacy/

http://d00.0c4.myftpupload.com/home/terms/

Clicking any of the Features, Design, Colours, How to Fit and FAQ links in the top nav don’t do anything. I’d like them to link to the relevant parts of the main page http://d00.0c4.myftpupload.com/

10

Hey James,

You’ll need to place the entire URL for your menu links, e.g., instead of placing just #features, place http://d00.0c4.myftpupload.com/#features since it’s on the homepage.

Ben

11

Great - thank you, that’d does let me click through from other pages.

The only issue now is that when I’m on the home page (http://d00.0c4.myftpupload.com/), all those links now show up in orange (the hover colour), instead of the grey links should show in.

I think the theme has something that makes the links show the hover colour when on that page. I usually like this feature, and it works well with my other links (e.g. Terms etc), so when on the Terms page, it is highlighted orange.

But it looks confusing on the home page now.

Can I turn this off for those anchor links? I’d still like to keep the orange when I hover over them though if possible.

Thank you

12

Hey James,

Yes, that is how it works. Since the links above are for the homepage, they get the hovered color. The only way to achieve what you want is via custom CSS. Place the code below under Appearance > Customize > Code > CSS Code.

.home .fl-page-nav-right .fl-page-nav-wrap .navbar-nav > li.current-menu-item > a {
  color: #6f7072;
}
.home .fl-page-nav-right .fl-page-nav-wrap .navbar-nav > li.current-menu-item > a:hover {
  color: #f78f20;
}

If you want to learn more about CSS, feel free to check the site below. :slight_smile:
http://www.w3schools.com/css/default.asp

Ben

13

Thanks Ben

I’ve tried the CSS but it doesn’t seem to make a difference. I tried to work out if I could change the part it was pointing at by inspecting the CSS but didn’t get very far.

Any ideas? Thank you!

14

Hey James,

Do you mind sharing temp admin access to the site so I can check? Also, don’t worry about it. It took me quite a while to learn it too! You can use the snippets I’ve been giving you as references. :slight_smile:

Ben

15

[Content Hidden]

16

Hey James,

The code you had there was correct, you just needed to clear the cache by hitting the Flush Cache button at the top admin bar. That’s what I just did and it now works! :slight_smile: And thanks for the kind words and for the recommendation! :slight_smile:

Ben

17

Fantastic! Thanks again

18

Awesome! Enjoy BB! :slight_smile:

Ben