Community @ The Turning Gate
Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
- New user registrations are disabled.
- Users cannot create new topics.
- Users cannot reply to existing topics.
You are not logged in.
- Topics: Active | Unanswered
Pages: 1
#1 2014-08-01 03:00:04
- michael
- Member
- Registered: 2012-11-27
- Posts: 88
SOLVED: Advanced menu styling
I'm migrating from CE3 and have some advanced menu styling I'd like to cary over that I cannot make within Pages even with the new controls.
What will I need to change for the below CSS to work with CE4?
.sf-menu > li > a {
bottom: -5px;
z-index: 1;
}
.sf-menu ul,
.sf-menu ul li {
width: 12.5em; /* better to use em here rather than px; desired width (120px) / font-size (16px) = 7.5em */
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul,
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 12em; /* match width above */
}
.sf-menu .sub-menu > li:first-child > a {
border-top-width: 1;
}
Last edited by michael (2014-08-02 19:02:24)
Offline
#2 2014-08-01 03:34:14
- rod barbee
- Moderator
- From: Port Ludlow, WA USA
- Registered: 2012-09-24
- Posts: 17,830
- Website
Re: SOLVED: Advanced menu styling
best thing to do is to use Firebug or Chrome developer tools to see what the selectors are.
.sf-menu will no longer work; that selector is gone
there is a new navigation.css file you might want to look through
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
#3 2014-08-01 14:47:39
- michael
- Member
- Registered: 2012-11-27
- Posts: 88
Re: SOLVED: Advanced menu styling
Looked at the file by I'm not that confident in CSS 
My primary goal is to have this working:
.sf-menu > li > a {
bottom: -5px;
z-index: 1;
}
But can't figure out which selectors to use from the new CSS
Offline
#4 2014-08-01 15:06:06
Re: SOLVED: Advanced menu styling
Probably #r2d2-menu > li > a, but you'll need to verify that.
Offline
#5 2014-08-02 19:01:57
- michael
- Member
- Registered: 2012-11-27
- Posts: 88
Re: SOLVED: Advanced menu styling
In case anybody else should be interested, this is the one:
p#nav a:hover,
.no-js #r2d2-menu ul li a:hover,
#r2d2-menu.is-hoverable ul li a:hover,
#r2d2-menu.is-clickable > ul > li > a:hover
Offline
Pages: 1