Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Can’t Figure out how to Round Navigation Edges Re: Can’t Figure out how to Round Navigation Edges

#124164
sgn_erik
Member

Oddly enough, those second & third rules worked in the live preview it showed while editing the CSS but once I got back to the builder this resulted in every single link having border radius, due to the table probably? I’ve just found this to work for the border radius:

#nav-wrap .container ul li.wsite-nav-0 a{
border-radius: 20px 0px 0px 20px;
}

#nav-wrap .container ul li.wsite-nav-7 a{
border-radius: 0px 20px 20px 0px;
}

The first rule did not work, I’m not sure if I have to write it differently because of the way they’ve set stuff up or use a different approach altogether.

Here’s where it’s at now:
http://skintest.weebly.com

I’ve also removed the right border on the right most link by using

#nav-wrap .container ul li.wsite-nav-7 {
background: none !important;
}

to counteract the border on the righ for .container ul li.. this wasn’t exactly related to the main problem but was definitely bothering me to have that extra border on the right.

Also, I have changed “#nav-wrap .container table” width to 101%, and that solved the problem of it assigning the last 2 links into a dropdown menu (I guess the overall navigation bar was not wide enough to properly hold everything)

The only problem now is the hover effect going over onto the next link and the text alignment being a little funky, probably related to the padding & width % colliding.