Styling the List Menu element

Hi there,

I’m using the List Menu element on some pages as a navigation tool. I’ve made it inline etc by styling it using the element’s CSS Panel and also some custom CSS, but the one thing I’d really like it to do is look like the menu on the standard Post and Category boxes, such as the Box 1 ‘Most Popular’ menu on the Homepage > Tech template, with the links above the line rather than below. At the moment I can only get them below the line when using the List Menu element.

Any ideas how to do this?

Cheers,
Rich

Hey Vlad,

Sorry, should have done that first time around… here’s an image:

https://prnt.sc/ofrts1

On the top is how I have a List Menu styled at the moment. And on the bottom is how they appear when on a Category or Post box, with the links above the red line and not below.

What I’d like is to be able to do that with the List Menu, put the links above the line and not below.

Cheers,
Rich

Hey Vlad,

Thanks for that. It didn’t work straight off, but after inspecting the element a bit I tried just targeting the block and the ul:

.td_block_list_menu ul {
margin-top: -45px;
}

And that seems to work. So thanks for pointing me in the right direction!

Rich

Hi Vlad,

I have another question regarding Styling the List Menu… I decided to change what I had going above and stick with a more preformatted look.

I’ve been trying to style this but have a hit a problem with the hover and active states of the links. If you look at the CSS you’ll see I’ve targeted each menu item but with a different look for the active page, in this case Overview (menu-item-656).

I can adjust the CSS so that a:link and a:visited change colour, but not a:hover or a:active. Any ideas?

Here’s the CSS:

.menu-item-644,
.menu-item-643,
.menu-item-642,
.menu-item-641,
.menu-item-640,
.menu-item-639,
.menu-item-638,{
background-color: #43b3e7;
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
margin:5px;

}
.menu-item-656 {
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
margin:5px;
border-style:solid;
border-color:#999999;
border-width:1px;
}

a:link {
color: white;
}
/* visited link */
a:visited {
color: red;
}
/* mouse over link */
a:hover {
color: black;
}
/* selected link */
a:active {
color: black;
}

And here’s a screen shot:

https://prnt.sc/ofrts1

So with the above example, it hovers over in red (not black as stated in the CSS) and the active page is red (not black as stated in the CSS).

Cheers!
Rich

Thanks Vlad,

Yep, that allows me to set a hover state for the links, but it’s the active link that I really want to get at.

Also, it looks like I may have sent you the wrong screenshot. Sorry! This should be the correct one:

https://prnt.sc/olxetl

As you can see, I can target the CSS for all the links and put them in nice blue boxes etc, but it’s the first one on this list that I just can’t get to. It’s the active page and in that box (a box I can style just the same as the others) should be the word ‘Overview’ in black text. The text is there and shows up on hover but I can’t change it independently of the others. I’d also rather it didn’t hover or link at all on the active page. Is there a way of removing the ‘Overview’ link but still keeping the word ‘Overview’ there? Would be kind of easy in HTML, just need the first item in the list to not be a link. Off the top of my head something like:

• Overview
• Gallery
• National Youth Dance Company of Scotland
• Project Y Performance Course

But thanks again, I’m sure we’ll work something out!

R

Hi Vlad, thanks for that. It’s:

http://humbucker.co.uk/talent-development-overview/

When you get there Angelo is the word to put in the box!

Had a quick look and I can’t see that I have a background color set all on that box. Anyway, hope you find an answer.

Cheers,
Rich

Thanks Vlad,

Yep that changes the background color. But I want that background color to be white, and the text to be black on every active page in that list. With the others in the list being the blue boxes with white text.

It seems so odd that I can change anything to do with those links expect this for the text:

.menu-item-671 {
color: black;
}

Doesn’t seem to work even with an !important in the CSS.

Tricky, eh?

Rich

Thanks for that Vlad,

I’ll have to leave it for now and just set all the text to black as I have to get on with it. But once I have everything in place I’ll email you about it again and we’ll see what we can do.

Thanks for your help though.

Cheers,
Rich

Hi again Vlad,

This might have been me being stupid, but I’ve just realised that the CSS panel that you can pull-up on an individual page in the Composer isn’t actually for that page… it’s site wide.

I really, really need the follow CSS to be adjustable for specific pages:

.menu-item-644,
.menu-item-643,
.menu-item-642,
.menu-item-641,
.menu-item-640,
.menu-item-639,
.menu-item-638,{
background-color: #43b3e7;
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
margin:5px;

}
.menu-item-656 {
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
margin:5px;
border-style:solid;
border-color:#999999;
border-width:1px;
}

How would I do that using Page IDs or something else?

Thanks
Rich

Hey Vlad,

Think I’ve found a fix to this. If I style all the links in the menu like this:

/* Talent Dev menu items */
.menu-item-671,
.menu-item-644,
.menu-item-643,
.menu-item-642,
.menu-item-641,
.menu-item-640,
.menu-item-639,
.menu-item-638, {
background-color: #43b3e7;
padding-top:5px;
padding-bottom:3px;
padding-left:7px;
padding-right:7px;
margin:5px;
}

And then I can target the page and link I want to change the background to like this:

/* Projects To Inspire Page */
.talent-development-projects-to-inspire
#menu-item-638 {
background-color: #008cb9 !important;
}

So using that page class of .talent-development-projects-to-inspire targets that one menu item on that one page.

Still can’t change the text color though!

Cheers,
Rich