My client wanted a call-to-action (“CTAˮ) button above the traditional navigation bar and my WordPress theme (Divi) didn’t easily support a widget in the header area. My solutions was to transform So I a menu item into a CTA button by using CSS.
Here’s how it looks
Link to the UB Foundation website.
How To
Start by adding a regular navigation link to the main menu. I added mine as the last menu item and identified it with a unique CSS class name: ubf-info-for-staff. This is so I can target this specific menu link with CSS.
Note: If you don’t see the option to enter an optional CSS class name on a menu item, go to the top of the Menu page, click Screen Options. Make sure the CSS Classes option is checked.
Now Add the CSS Magic
Include this CSS in your WordPress child theme.
- Lines 13-18: Moves this menu item relative to its default position within the navigation using left and top attributes.
- Lines 20-30: Gives it a rounded button style.
- Lines 32-36: One additional tweak was to make the INFO FOR text a little heavier weight (700).
/*
___ __ ___ __ __ __ ___ ___ ___
| |\ | |__ / \ |__ / \ |__) /__` | /\ |__ |__
| | \| | \__/ | \__/ | \ .__/ | /~~\ | |
Special info-for-staff menu item
- On non-mobile menu, move it up out of main nav bar
so it appears to the right of the logo area
*/
@media only screen and ( min-width:981px ) {
.ubf-info-for-staff {
position:relative;
left: 90px;
top: -70px;
z-index:9999;
}
.ubf-info-for-staff {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #666;
color: #fff;
display: inline-block;
margin: 0 auto;
padding: 0 !important;
text-decoration: none;
}
.ubf-info-for-staff span {
font-family: 'Titillium Web', "Trebuchet MS", Arial, sans-serif;
font-size: 11px;
font-weight:700;
}
.et_header_style_centered #top-menu > li.ubf-info-for-staff > a {
font-size:11px !important;
line-height:1 !important;
font-weight:normal !important;
color: #eee !important;
padding: 6px !important;
}
.et_header_style_centered #top-menu > li.ubf-info-for-staff > a:hover {
color:#eee !important;
}
}