Hello,

I'm continuing to discover the power of the Atahualpa theme.

I don't know how to keep highlighted the current active item in the page menu bar. I used a plugin named "PostLists", that creates some placeholders so I can post posts into pages.
Is there a way that the tab related to the parent page, that hosts some posts, keep being highlighted as active when one of these posts is displayed?
I also have the same needs related to the sidebar menu: I used the Wordpress Navigation List Plugin NAVT, and I'd like the active category to remain highlighted when we read one of the posts that are in.

Hope my question is sufficiently clear...

Thanks a lot for your help!

Vincent

Look into the source code to see if the page/category has a class such as current_page_item or current-cat or current-cat-parent and add styles for thos via HTML/CSS Inserts/CSS Inserts

li.current-cat {
background: #123456;
}

Common problem I guess. I have a page menu navigaton in the left sidebar. Integrated with the plugin flexipages. I worked on the theme menu for hours to customize it a bit. Now it looks like I want it to be. Except one point:

How can I arrange it, that the button stays highlighted, as long as the visitor is on that specific page, which belongs to the button ? I get this effect only during hover status. With the page menu bar (horizontal navi) it works. With the vertical navi I just do not get it. When I play around with a:active ... it seems like it is not meant as the "Active Page". Any idea, how to fix that ?

You can style this with

div.flexipages_widget li.current_page_item {
...
}

Wordpress adds

current-cat to current category
and
current_page_item to current page

I added div.flexipages_widget above to limit the CSS to the pages generated by that widget in case you happen to have the same page link in both the widget and the menu bar

Hy Flynn

it worked a bit I added:
background: #003399;

The result was, that all main items of the first level had blue background when active. Like I wanted.
But if sub level items under the main level item there, they turned into a blue box together with the main level item, even if not active.

So under the first button I have 2 sub level buttons. When I now click on the first main level button, a big box is spanning around all 3 buttons. No borders in between and the same width all around.

Is it not possible to do it somehow like I did it with the hover status ? a:hover . I played already with a:active ... but no result at all. Seems like the active status is not the correct description for the status, when you are on the page of a button.

If I have to address each item seperately and add code ... let us forget it. Then I will not cutomize it that way ... takes ages.

Greetings

O.k. I have not looked close enough, you're putting the styling on the links, not on the LI. Use this instead (also using the widget's ID now to force overwriting in case it interferes with something else)

div#flexi-pages-1 li.current_page_item a:link,
div#flexi-pages-1 li.current_page_item a:active,
div#flexi-pages-1 li.current_page_item a:visted,
div#flexi-pages-1 li.current_page_item a:hover {
...
}

About the other LI's borders dissapearing. That should not happen, this targets only the LI with the class current_page_item. There's also only one level of links in that widget as far as I can see, no sub levels (which would have explained this behavior). Perhaps this new CSS fixes that, or otherwise I'd have to see it in action, seems you removed it again.

Hi Flynn,

thank you for the code. But it had no impact on the menu at all.

If you go on my site and then click on the german flag, you will end up where I am working on right now.

In the left side bar you will find the navigation. So far I have only sublevels under the first button for test reasons. More will follow later.

I could already manage to get the buttons blue during hover status. Now I would like the button to stay blue, when you clicked it and as long as you stay on that side. The same for the sub level buttons.

When you click a sub level button, it should stay blue, but not it´s parent button of the first level.

So always just the button of the page you are on. With the main page menu (horizontal) it works.

With the first code you gave me it worked. But only with main level buttons. When I clicked a sublevel button, it created a blue fild all over the first level button and sublevel button. I will put the code in, so that you can see.

When you now click the first button you will see the result. Please hover the blue box. There are sub buttons in it, which are right aligned and have a distance to the left side of approx. 35px. When you click another main level button, it will stay blue as wished. But I can somehow not change the text color in it and it is the same blue ... so not visible any more. I would like it to stay yellow as in hover status.

If it is not possible to get this fixed without hours of playing around. I will leave it like it is. Maybe you will include such navigation I am looking after in your next theme ;-)

And I was looking at yourdomain.com/ all the time, not yourdomain.com/de/ ...
Checking /de/ tomorrow.

You had a look ? Hopeless ?

That blue color is caused by

.widget ul li a:visited, .widget ul li a:link {
color: #003399;
}

You should be able to change it with

div#flexi-pages-1 ul li.current_page_item a:link,
div#flexi-pages-1 ul li.current_page_item a:visited,
div#flexi-pages-1 ul li.current_page_item a:active,
div#flexi-pages-1 ul li.current_page_item a:hover {
color: #ffff00;
}

Add important if that doesn't work

color: #ffff00 !important;

Getting closer !
1. Is it possible, that only the button of the active page stays blue ? It works with the subpages. But if the main page button is active, all subbuttons are also blue. But this would be not a big issue.
2. If the subpage button is active, the blue field is exceeding to the left side of the button. This is a bit tricky.

Many thanks !

1. Remove the styles from the <LI>'s and put them on the <A>'s

Remove this CSS insert

 div.flexipages_widget li.current_page_item {
background-color: #003399;
}

And use this CSS Insert (you are already using a part of this)

 /* DEFAULT */
div#flexi-pages-1 ul li a:link, 
 div#flexi-pages-1 ul li a:visited {
 color: default colors here
 background: defaults colors here
 }
/* For HOVER */
 div#flexi-pages-1 ul li a:hover,
 div#flexi-pages-1 ul li a:active {
 color:#FFFF00;
 background: #003399;
 }
/* For CURRENT */
div#flexi-pages-1 ul li.current_page_item a:link, 
div#flexi-pages-1 ul li.current_page_item a:visited, 
div#flexi-pages-1 ul li.current_page_item a:active, 
div#flexi-pages-1 ul li.current_page_item a:hover {
color:#FFFF00;
background: #003399;
}
/* Reset children of CURRENT */
div#flexi-pages-1 ul li.current_page_item ul li a:link, 
div#flexi-pages-1 ul li.current_page_item ul li a:visited, 
div#flexi-pages-1 ul li.current_page_item ul li a:active, 
div#flexi-pages-1 ul li.current_page_item ul li a:hover {
color: default colors here
background: defaults colors here
}

2.

Add CSS Insert

 div#flexi-pages-1 ul li ul li a:link,
div#flexi-pages-1 ul li ul li a:active,
div#flexi-pages-1 ul li ul li a:visited,
div#flexi-pages-1 ul li ul li a:hover {
margin-left: 0 !important; 
}

do I understand you right, that I only have to follow the css steps you wrote about ? Or do I additionally have to do something with the li and a ? I mean, does the css you posted include the change from li to a ?
Anyway, I will backup first ... getting a bit confusing.

Yes, you should try what I posted above. I also added 2)

Something changed

Actually the submenu buttons were supposed to be a bit more to the right side, but it is okay to move them to 0 margin. The problem is, that 0 margin to the left is still not very left. Even if I move them back to the very left, there will stay a blue bar between them from the active background (main button).

But we are very close !!!

Also please notice, that if main button active, the hover status for sub buttons does not work any more.

Originally Posted by Tigger

Something changed

Actually the submenu buttons were supposed to be a bit more to the right side, but it is okay to move them to 0 margin. The problem is, that 0 margin to the left is still not very left. Even if I move them back to the very left, there will stay a blue bar between them from the active background (main button).

The blue background is caused by this.

div.flexipages_widget li.current_page_item {background-color:#003399;}

Remove that if it is a CSS Insert. Otherwise overwrite it with a CSS Insert like this:

div.flexipages_widget li.current_page_item {background-color:none;}

Originally Posted by Tigger

Also please notice, that if main button active, the hover status for sub buttons does not work any more.

Change the last part of the CSS from the post above

 /* Reset children of CURRENT */
div#flexi-pages-1 ul li.current_page_item ul li a:link, 
div#flexi-pages-1 ul li.current_page_item ul li a:visited, 
div#flexi-pages-1 ul li.current_page_item ul li a:active, 
div#flexi-pages-1 ul li.current_page_item ul li a:hover {
color: default colors here
background: defaults colors here
}

to

 /* Reset children of CURRENT */
div#flexi-pages-1 ul li.current_page_item ul li a:link, 
div#flexi-pages-1 ul li.current_page_item ul li a:visited {
color: default colors here
background: defaults colors here
}
div#flexi-pages-1 ul li.current_page_item ul li a:active, 
div#flexi-pages-1 ul li.current_page_item ul li a:hover {
color: HOVER colors here
background: HOVER colors here
}

Okay, that absolutely worked. Now is just one little little bug to hunt after ... then I have exactly the navi I wanted.

When the first main button is active, the hover function of it´s sub buttons does not work. The sub buttons are only blue.

No no no .... was my mistake. One "#" was missing. It is now working ... that was a bit of a puzzle ! Thank you very very much ! You just sold another piece of gold. Check your account during monday. It´ll be there.

It seems to work. The color: is missing from the last code block of post #16

div#flexi-pages-1 ul li.current_page_item ul li a:active,
div#flexi-pages-1 ul li.current_page_item ul li a:hover {
color: HOVER colors here
background: HOVER colors here
}

Flynn,

Been using your Atahualpa theme to build my site, and it is fantastic! Tom Guilmette recommended I visit your site, and I am sold on this great theme!

I am trying to have my Flexi Pages highlighting stick on the page the user is on as well. I see your last post, but do not know where to place that code. Is it in a single specific file, or somewhere else?

Thank you!

Scott Karlins

The code from post #19 would be put into HTML/CSS Inserts -> CSS Insert

Greetings to Tom if you speak to him, he's a great guy.

Flynn,

Thank you for the speedy reply. Also, Tom says hello!

The code is not working for me. The active page I am on is not staying highlighted. Here is what I inserted into HTML/CSS Inserts -> CSS Insert:

div#flexi-pages-1 ul li.current_page_item ul li a:active,
div#flexi-pages-1 ul li.current_page_item ul li a:hover {
color: #000000;
background: #FFFFFF;
}

Thank you!

Scott Karlins

Your flexipages widget got another ID. Looks like it's changing it's ID number each time your remove it from a sidebar and place it there again. The class stays the same so let's use that. Then add !important to ensure that the styles are being applied because classes are less likely to successfully overwrite any existing styles than ID's

div.flexipages_widget ul li.current_page_item ul li a:active,
div.flexipages_widget ul li.current_page_item ul li a:hover {
color: #000000 !important;
background: #FFFFFF !important;
}

Flynn,

Weird, still not working... It highlights black only when I hover over them.

I even tred inserting the current ID, and still no go.

If you get a moment, I would appreciate it if you could take a look

Thank you!


Scott Karlins

Flynn,

Any insight on this issue? If not, no sweat. I am also trying to contact the author of FlexiPages to see if they have any ideas.

Thank you for your time!

Scott Karlins