GregLassale Posted April 3, 2020 Share Posted April 3, 2020 Site URL: http://gregorylassale.com Hello, I use the Brine template and am trying to have the menu item on the right ("FR") styled as a button. That menu item toggles between the French and English versions of the site, and because the site is multilingual and already uses a secondary nav for the the French version, I can't go the secondary nav option route. Plus I need that same menu item on the French version ("EN") also styled as a button anyway. Is there any way to accomplish this without code ? If not, could anyone help me with it ? I guess I would need a piece of code that would style only one item in the nav bar as button and leaves the rest alone. Thanks in advance for your help ! Link to comment
ChrisBartow Posted April 3, 2020 Share Posted April 3, 2020 Under Design > Custom CSS you can style the last element of the navigation so it's different and looks like a button. Here's an example giving it a white border. .Header-nav-inner>a:last-child { border: 1px solid white; } Creating websites using Squarespace at Design by Donuts 🍩 Link to comment
GregLassale Posted April 3, 2020 Author Share Posted April 3, 2020 Thanks Chris. Could you please let me know the appropriate code to play with the dimensions (height, width) as well as the angle of the corners? Thank you! Link to comment
ChrisBartow Posted April 3, 2020 Share Posted April 3, 2020 Sure! Instead of width, you may want to use padding to add space between the text and the border edges. The first number will be the top/bottom spacing, second one is left/right spacing. .Header-nav-inner>a:last-child { border: 1px solid white; border-radius:5px; padding:5px 25px; width:150px; } Creating websites using Squarespace at Design by Donuts 🍩 Link to comment
GregLassale Posted April 3, 2020 Author Share Posted April 3, 2020 Fantastic! I'll play with those settings. Thanks again! Link to comment
GregLassale Posted April 3, 2020 Author Share Posted April 3, 2020 Hello again. For some reason, changing the padding values did not seem to do anything, so I set the width at 50px and centered the text. One more thing I forgot. I'd like the color of the button and text to change on hover: text to black and button to white. Is that possible via CSS? Link to comment
GregLassale Posted April 3, 2020 Author Share Posted April 3, 2020 I Think I figured it out: .Header-nav-inner>a:last-child:hover { color: black !important; background-color: white !important; } Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.