One Page Navigation with Cornerstone

Support
#1

Hi all,

Trying to setup one page navigation for a new website im working on - www.chinatoaus.com.au

I’m yet to create a menu, but essentially what i want to do is have the user click on a menu item, for example “Who We Are” and it scrolls down to the “Who We Are” section of the website. This functionality shouldnt affect the user being able to scroll down the entire website on their own if they choose to.

Thanks

#2

Hello @nicholaspanetta,

Thanks for writing to us.

No, it is not going to affect any scroll features or other features of the site. In case if you have not seen our doc of the One Page Navigation please have a look at the doc to learn more about how to set the one-page navigation.

Hope it helps
Thanks

#3

Awesome, thank you. It’s all setup and working perfectly. However i’d like to centre the logo in the header and have the menu sit underneath, i just cant work out how to do that. At the moment the logo is to the left and the menu to the right.

#4

Hi @nicholaspanetta,

Since you’re using the standard header, you can navigate to Theme Options > Headers find the Logo and Navigation layout control and set that to Stacked.

Hope it helps,
Cheers!

#5

Thank you so much, that worked.

Last question please - It seems like the main menu disappears at a certain point when scaling down to smaller resolutions / mobile versions and the logo is beck to left justified. How can i keep this layout persistent across all resolution scales.

Atleast have the logo centred and remove keep the menu hidden in smaller resolutions?

Thanks

#6

Hello @nicholaspanetta,

It seems that you have added custom code for the mobile menu icon and the font size of the mobile icon is been set as 1px just because it is not displaying. Please have a look at the given screenshot below.

asdc (1)
asdc (1)862×605 118 KB

I would suggest you please remove the custom CSS code from the Theme option or for the quick fix please use this code.

@media (max-width: 978.98px){
.x-btn-navbar, .x-btn-navbar.collapsed {
font-size: 25px;
}	
}

In case if you want to hide the mobile menu and align the logo to be centered please use this code under Theme Option —>CSS

@media (max-width: 978.98px){	
.masthead-inline .x-btn-navbar {
display: none;
}
.x-brand {
    display: block;
    float: none;
    text-decoration: none;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you can subscribe to One to get further assistance.

Hope it helps.
Thanks

#7

Fantastic! All looking and working how i’d like it to. Thanks so much for your help.

#8

We are glad that we could be of assistance!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.