What is the best way to add Menu items to elements in a webpage?

Hi there,

I have a single page Ethos based website that is ‘split’ up into 3 sections, what’s the best way to add menu items to the headers of each section? I’ve got Films, Lighting and Photography.

I thought I could link the menu items to the Essential Grids I have but they’re not showing up as an option, just some random examples.

http://www.jerzygudjonsson.com

Hello @jerzybg,

Thanks for asking. :slight_smile:

Looks like you are wanting to add navigation/menu items in sections. In Cornerstone builder there are bunch of Navigation elements that you can take a look and depending on your requirement, you implement any of them.

To help you get started I have recorded a screencast video, please take a look. https://cloudup.com/cF8dBjelOJ6

Thanks.

Thanks @Prasant but I need them to be a part of the header of the webpage for a clean look. It is set to fixed top so it would help people navigate quickly otherwise there’s a lot of scrolling to do. I looked through all the options and I can’t find a way to add more navigation items to the menu that only says Home I can’t even find the options for changing what it says. Furthermore I would like to change it’s behaviour, instead of reloading the page it would be much nicer that it would scroll all the way to the top of the page.

Hello @jerzybg,

Thanks for updating the thread. :slight_smile:

  1. You need to navigate under Appearance > Menus to add more menu items or edit Home menu text. Under Manage Location, you can see which menu item is assigned. After that under Edit Menu > Select a menu to edit select the menu to make necessary changes.
  2. Scroll: You can setup one page navigation. To get started, please take a look at following tutorial.

Thanks.

Thanks @Prasant this worked like a charm and was very easy to implement.

There seems to be theme with the X theme, a solution brings up a new problem. I unchecked the box Footer Menu as I don’t need a menu at the bottom of the page since the main menu is top fixed but now I got a link in the footer saying ASSING A MENU which I need to get rid off.

Also, the main menu does not highlight which part of the website the user is looking at, how do I enable that feature?

Hello @jerzybg,

Thanks for updating. :slight_smile:

You can add following CSS under X > Theme Options > CSS:

.x-colophon.bottom .x-nav {
    display: none;
}
.x-navbar .desktop .x-nav > .current-menu-item > a{color: #fff !important;}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

Thanks @Prasant that worked just fine. I appreciate the video links and will try and learn CSS when I have more time. At the moment I’m trying to put all effort into getting my website off the ground as soon as possible as people is asking for the link.

The main menu is still not working the way I would like it to. Is it too complicated the get the a relevant menu button to stay highlighted when that part of the website is being looked at?

Last but not least, is it possible to have a fixed top menu show up on a mobile device?

Hi There,

Please also add this custom CSS:

@media (max-width: 979px){
    .x-navbar.x-navbar-fixed-top {
        position: fixed;
    }
}

Let us know how it goes!

This is great @thai, thank you! After adjusting the fonst sizes, spacing and other bits it now looks great in any resolution :smile:

You’re welcome!
Thanks for letting us know that it has worked for you.

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