Yes! 2 Navigation Buttons + On Mobile Menu
1. Plugin Info
Go beyond the single header button option and turn your last two links into buttons.
Works with Squarespace 7.1
Applies to Desktop and Mobile
Uses Custom CSS
2. Add this code to Custom CSS
// 2 NAV BUTTONS 7.1 + MOBILE - Ghost //
@link-for-first-button: 4; // add the number of the link to turn it into a button - example: if it's the 4th link add 4
@link-for-second-button: 5; // add the number of the link to turn it into a button
@2-nav-buttons-background: #000;
@2-nav-buttons-link-color: #fff;
@2-nav-buttons-font-size: 14px;
@2-nav-buttons-padding: 10px 5px;
@2-nav-buttons-padding-mobile: 5px 20px;
@2-nav-buttons-width: 120px;
@2-nav-buttons-width-mobile: 150px;
@2-nav-buttons-border: 1px solid #000;
@2-nav-buttons-radius: 5px;
/* ---- Do Not Edit Below ---- */
.header-menu-nav-item:nth-child(@link-for-first-button) a, .header-menu-nav-item:nth-child(@link-for-second-button) a { background: @2-nav-buttons-background !important; color: @2-nav-buttons-link-color !important; border: @2-nav-buttons-border !important; border-radius: @2-nav-buttons-radius !important; padding: @2-nav-buttons-padding-mobile !important; display: inline-block; width: @2-nav-buttons-width-mobile; } .header-nav-item:nth-child(@link-for-first-button) a, .header-nav-item:nth-child(@link-for-second-button) a { font-size: @2-nav-buttons-font-size; background: @2-nav-buttons-background !important; color: @2-nav-buttons-link-color !important; width: @2-nav-buttons-width !important; border: @2-nav-buttons-border !important; border-radius: @2-nav-buttons-radius !important; text-align: center !important; } .header-nav-item a { padding: @2-nav-buttons-padding !important; }
// 2 NAV BUTTONS 7.1 + MOBILE - Ghost //3. Customizable Options
Assign Button Style To 2 Links
Background Color
Link Color
Link Font Size
Padding (Desktop and Mobile)
Button Width (Desktop and Mobile)
Border Style
Border Radius
Link font size, family, and mobile menu style can be changed in Squarespace settings.
4. Plugin Notes
No plugin notes
