Can’t Figure out how to Round Navigation Edges

[sgn_erik]

Hello!

I’m having issues getting my navigation bar the way I want. It is one full nav bar that all the links share, each with its own section of it and hover colour change.

The two issues I’m having though:

– Cannot figure out how to make the links take up exactly 100% of the nav bar without naming the pages such that they fit perfectly

– The colour change on active page abides by the border-radius of the total navigation bar, but the hover colour change does not. I’ll include a link to the site testing grounds so you can see what I mean, and the navigation portion of the CSS. I’ve also dramatically increased the border-radius of the navigation bar to make it very clear that the hover effect is perfectly square on the outer links even though the nav bar & the active colour effect are rounded.

http://skintest.weebly.com/

/* Navigation

---

*/

#nav-wrap {
padding-bottom:37px;
}

#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
background:url(nav-bg.png) repeat-x top left;
height:46px;
border-radius:15px;
-webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);
}

#nav-wrap .container table {
width:100%;
left: -2px;
position: relative;
top: -2px;
}

#nav-wrap .container table td {
padding:0px;
vertical-align:middle;
}

#nav-wrap .container ul {
list-style: none;
float: left;
width: 102%;
border-radius: 5px;
}

#nav-wrap .container ul li {
list-style: none;
float: left;
background:url(nav-separator.png) no-repeat right center;
padding-right:2px;
}

#nav-wrap .container ul li a {
float: left;
display: block;
color: #fff;
padding: 0px 31px 0px 30px;
border: 0;
outline: 0;
list-style-type: none;
height:46px;
line-height:46px;
text-shadow:0 -1px 1px rgba(0,0,0,0.8);
}

#nav-wrap .container ul li#active,
#nav-wrap .container ul li:hover {
background:rgba(0,0,0,0.6);
}

#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
background: rgba(40,40,130,0.4);
border: 0;
}

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

[Paulie_D]

>Cannot figure out how to make the links take up exactly 100% of the nav bar without naming the pages such that they fit perfectly

If you use a percentage for the width for each of the list items then it should work.

e,g, 8 links = 12.5% each

There may be some issues with borders / padding but these can be negated using the box-sizing ‘fix’.

[Paulie_D]

I jut realised you are using a table to hold the menu….is that by choice, if so, it’s an odd one.

There are much better options.

If it’s something imposed then I’ll have to re-think.

[sgn_erik]

I don’t have the experience to build a website from scratch so I’ve started with a theme built by Weebly (the free website builder I’m using) and modifying it

[Paulie_D]

Does it code the menu for you or do you have the ability to define your own HTML/CSS for it?

[sgn_erik]

You can do your own CSS.. They have HTML sheets for page layouts but I can’t say they contain very much.

Here’s the entire HTML for a page type. It’s a drag and drop website builder so I imagine there is quite a bit of stuff not included within the HTML sheets.

{phone:text}

{social}

{logo}

{menu}

{search}

{content}

{footer}

[Paulie_D]

See this…

{menu}

Can you put anything you want in **{menu}** or does it automatically create the menu items & links?

[sgn_erik]

Changing the word menu to something else (I don’t know if there’s something specifically I should change it to since I really don’t know much about HTML) made all the navigation links disappear.

For the rounded edges, I’ve found that changing this affects the border radius on the first link. I’ll see if I can use something similar for the last link in the navigation.

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

Changing the width to 12.5% for the navigation links seems to have brought up what you mentioned with borders & padding.. What was the fix for this?

I’m not sure if the issue w/ padding & borders is the cause or not, but when I set the width for the links to 12.5%, it still over extends over the end slightly resulting in their automatic fix which is adding a “More…” link with a dropdown. Ideally I just want the 8 pages (or however many, once I know how to fix this). Also the hover effect extends onto the next link to the right on some of the links, I’m sure that’s related to the padding.

[yinzdo]

#nav-wrap a {
box-sizing: border-box;
}

#nav-wrap li:first-child a {
border-radius: 5px 0 0 5px;
}

#nav-wrap li:last-child a {
border-radius: 0 5px 5px 0;
}

1. The first rule should fix your border and padding issue. See Chris’ post on [Box Sizing](https://css-tricks.com/box-sizing/ “Box Sizing Article”) for more info.
2. The second rule should add a border radius to the left side of the first nav item.
3. The third rule should add a roder radius to the right side of the last nav item.

[sgn_erik]

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.

[Author]

Posts