Nav Menu to link to content on same page

Hi guys,

One more… I’m building a one page site. I’d like to have a nav menu, but instead of going to different pages, I want to link menu buttons to various sections lower down on the page. Can I do that? If so, how? Thanks much. Great theme so far!

Hi,

You can add the IDs of your rows in the menu so when they items are clicked the browser will scroll to those rows. You can get the IDs by inspecting the source of your site. If you don’t know how post a link please.

Hi Vlad,

Thanks for the followup. I thought I’d be able to figure that out, but can’t. I looked at the source code, found a few different IDs for rows/sections and tried making custom menu items with them from the “links” section of the menu back end, but nothing seemed to work. Here is my site. http://www.kfbgold.com/
Thanks for your help! Troy

Hey,

Your rows start from #pg-2419-0 to #pg-2419-7. So if for example you want to link to your third section you would add http://www.kfbgold.com/#pg-2419-2 as the URL. You can also add only the ID in the link field but that won’t help if somebody tried to click it from a secondary page.

Awesome! Thank you Vlad. May I get some help with a couple more things?

I think I have most everything how I want it, but am having trouble with 2 sections/rows. They are the Contact Info (JetPack) and Contact Form 7. They are the two blocks at the bottom of the page http://www.kfbgold.com/

Since they are not part of Moesia free (contact form 7 is inputted via shortcode in a text block as you instructed), I don’t have automatic control over certain color aspects. I want to change the color of the 2 dashed lines under each title and the color of the Submit button on the contact form. I assume its a CSS line to add, but I’ve tried all sorts of different ones, searching from examples in this forum, but can’t make anything work. Do you know what I could use?

Thanks again for all of your help!

Sorry! forgot one more thing. Is there a CCS code to use to put a border around the google map in the Contact Info jetpack block?

Vlad, sorry again… this is the last one to go with those above. The menu linking worked great. Is there a way however for the url display (at bottom on hover) for the page sections to be the menu section name rather than the ID at the end i.e. #pg-2419-2?

Update the theme for the titles underlines and they will take the primary color.
Button:


input[type="submit"] {
     background-color: #333;
     box-shadow: 0 0 5px #000;
}

Map border:


.contact-map {
    border: 3px solid #3C3C3C;
}

Regarding the links, there isn’t really a way. The other ID you could target for the first section is #employees and that doesn’t help in your case. I wouldn’t worry about that, regular users don’t notice it.

unfortunately those didn’t work. maybe i placed them wrong…

the button puts the box shadow/color around the whole widget. but the actual button stays the same orange color. i put this in the css edit section of the contact info (jetpack) widget.

the map border css puts a border around the whole widget, but not around the map. I also put this in the css edit section of the text widget where i placed the contact form 7 code.

I’m not quite following you on where to change the theme colors for titles/underlines.

You’re supposed to put them in a custom CSS plugin. If you’re using Jetpack then it already has a custom CSS module. So remove the code from where you’ve put it now.
For the underlines I said you should update the theme.

Thanks again. everything works great!