Style of single 'Menu Button Item' + link to submenu

1. Perfect for this Josue. Thank you !!!

2. I actually just want it to look the same as when HOVER. I use this CSS on HOVER:

#top #wrap_all .header_color .av-menu-button-colored > a:hover > .avia-menu-text {
background: black;
color: #f3c463 !important;
font-style: bold;
border-color: black;
}

So the text-color should be #f3c463.

Hi Josue,

This works perfectly connecting the Main Menu and Sub Menu, when active.

But when Main Menu page ’20 års jubilæum’, which the Main Menu Button ‘SINCE 1995′ is active by itself, it do not show the same color #f3c463, but still white when active: http://www.changegroup.dk/20-aars-jubilaeum/

I use the following CSS:

#top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text {
background: black;
color: #ffffff !important;
font-style: bold;
border-color: black;
}
#top #wrap_all .header_color .av-menu-button-colored > a:hover > .avia-menu-text {
background: black;
color: #f3c463 !important;
font-style: bold;
border-color: black;
}
#menu-item-6574 span.avia-menu-text {
    color: #f3c463 !important;
}
#top #wrap_all .header_color .av-menu-button-colored > a:hover > .avia-menu-text, #top.single-portfolio #wrap_all .header_color .av-menu-button-colored > a > .avia-menu-text {
background: black;
color: #f3c463 !important;
font-style: bold;
border-color: black;
}

Hi Josue

Maybe I didn’t specify: I only need the Main Menu button item to highlight color: #f3c463 (#menu-item-6574)
So the above code did work, but now it highlights every Main Menu item with color: #f3c463.

I have change the code back to the previous, as the website is live at the moment.

Hi Josue,

That is perfect. Thank a lot for your time and help.

Best Regards,
ChangeGroup

Hi Josue,

Same issue as above, but in regards to another page, where I need to connected a ‘Custom Menu’ in a sidebar with active blog posts:

I have create a new ‘Investor Relations’ page on our website. This consists of 5 pages, all with the same left ‘sidebar’.
In this sidebar I have a widget with a ‘Custom Menu’. Please see the content below.
In the news (Meddelelser) section of the Investor Relations page, I would like to highlight the selected menu (Meddelelser), when the Investor Single Blog Posts are active.

For example:
When the ‘Meddelelser’ is active, this is highlighted with the light blue color on the sidebar custom menu. But when a choose one of the blog posts on the ‘Meddelelser’ page, the menu item ‘Meddelelser’ is not highlighted with the light blue color on the sidebar custom menu.

How do I connect the active blog posts with the Custom menu item ‘Meddelelser’? Note that all blog post have showed on ‘Meddelelser’ are categorized as Investor Content. Category is named: Investor Nyhed.

Hope the above makes sense.

Br
ChangeGroup

Hi Andy,

What are you commenting on? It doesn’t make any sense to me. You haven’t suggested anything to me in the above replies, other than CSS code implementation? I’m asking another question than the original one. Did you read my latest post thoroughly?

I have created an ‘actual menu’, which I use in the widget ‘custom menu’, so that this ‘actual menu’ can be viewed in the sidebar…..

Br
ChangeGroup

Hi Ismael,

Thank you :)
That makes sense, as I want to ‘connect’ the page ‘meddelelser’ with the singe blog posts visible on that page. All the single blog posts in the ‘blog grid’ are within the same category ‘Investor’.

Hope you can help me with this.

Best regards
ChangeGroup

Hi Ismael,

Thank you. That could work fine for me.
I will try that instead. I will get back to you soon.

Br
ChangeGroup

Hi Ismael,

I have tried your suggestion. But I can’t get it to work properly.

I have created a new sidebar menu, where ‘Meddelelser’ is the category ‘Investor’. But when I am on a single blog post, within the category ‘investor’, then meddelelser is not highlighted with light blue color.

Can you figure out, what I’m missing?

Hi again,

I made it work, but need to style the ‘Read More’ tag on the achieve page to bold text?
How can I make this work?

The styling I use for *Read More’ tag on other ‘blog grids’:

.invfront a.more-link {
top-padding: 10px;
color: #2c4143;
font-weight: bold!important;
}

I added the missing ‘Read More’ tag by first deleting the following, which I had added in functions.php:

function change_blog_archive_style() {	
	global $avia_config;
	if(!is_single()){ $avia_config['blog_content'] = "excerpt_read_more"; }
}
add_action('get_header', 'change_blog_archive_style');

And added instead to achieve.php:
'contents' => 'excerpt_read_more',
Which Josue suggested in the post: https://kriesi.at/support/topic/add-read-more-text-on-grid-blog-archive-page/

Br
ChangeGroup

• This reply was modified 7 years, 11 months ago by changegroup.

Hi Ismael,

Thanks a lot for your help with all the styling. It works great!
I will take a look at the guide :)

Br
ChangeGroup