active page to appear at top of a menu

[emresenoglu]

hello all - i'm trying to create a system where only the active page is shown in a certain menu - so for example for a menu of 3 pages (about, services, contact), only the active page title will be shown in the menu and the others will appear as sub items when mouseover is active. currently i was able to achieve this with using css to hide one menu and show the other, but i am running into the 4 menu limit, now that i have 5 different pages i want this to work on (2 pages in central menu and 3 in the right menu).

is there a smarter way of achieving this? i am just getting started with basic css, but im hoping there is a way to do this that i can't think of due to my currently limited web skills. many thanks!

current situation of the website: senoglu.co

[arminunruh]

hey!

if you are on a page, its menu item gets the class ".current-menu-item"

/*hides all menu points*/
nav li > a{
opacity: 0!important;
}
/* shows only the currently active menu point */
nav li.current-menu-item > a{
opacity: 1!important;
}

maybe this? not sure

this will only show the active menupoint but hide the others. but im not sure if that makes sense cause you want to show the other menu points in a submenu.

[emresenoglu]

hey armin thanks for the help. hm i don't think that works as intended as I have 2 menus on certain pages (like the one you see above): the middle menu (project) and the right menu (contact/about).

i'm basically trying to cycle the menu items between three pages: contact, about, services. if i'm on services, then that's on top and visible, while contact and about are sub items (and therefore hidden). if i'm on about, the other two are sub items and so on. does that make sense?

[arminunruh]

hey you cant really make some menu items submenu items depending on what page you're on :/

maybe you'd need to come up with some custom html for that

[emresenoglu]

alright, got it thanks armin - will look into that