Needs some help with header area

i'm trying to tighten up the look of the header area on my site. I'd like the logo to be in the black space at the top but round the corners of the white area below the navCatTabs. I've been trying multiple things to make this work to no avail. I've included a screenshot of a zen cart that has a header setup exactly like i'm looking for.

Any help on the matter would be GREATLY! appreciated.

www.matchlockarms(dot)com/store

Thank you in advance.

matchlock:

i'm trying to tighten up the look of the header area on my site. I'd like the logo to be in the black space at the top but round the corners of the white area below the navCatTabs. I've been trying multiple things to make this work to no avail. I've included a screenshot of a zen cart that has a header setup exactly like i'm looking for.

Any help on the matter would be GREATLY! appreciated.

www.matchlockarms(dot)com/store

Thank you in advance.

open includes/templates/YOUR_TEMPLATE/css/stylesheet.css

find the following and make the highlighted changes

#navCatTabsWrapper {
background-color: #5B2D2F;
color: #9a9a9a;
background-image: none;
font-size: 1.4em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

clydejones:

open includes/templates/YOUR_TEMPLATE/css/stylesheet.css

find the following and make the highlighted changes

#navCatTabsWrapper {
background-color: #5B2D2F;
color: #9a9a9a;
background-image: none;
font-size: 1.4em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

very close! take a look at the site and you'll see the navcattabs have a full border on them causing a little black mark on the bottom sides. i'd like this to bleed in to the rest and look like one white area with the round corners on the top.

matchlock:

very close! take a look at the site and you'll see the navcattabs have a full border on them causing a little black mark on the bottom sides. i'd like this to bleed in to the rest and look like one white area with the round corners on the top.

try this:

#navCatTabsWrapper {
background-color: #fff;
color: #9a9a9a;
background-image: none;
font-size: 1.4em;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}

clydejones:

try this:

#navCatTabsWrapper {
background-color: #fff;
color: #9a9a9a;
background-image: none;
font-size: 1.4em;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}

simply amazing.. THANK YOU SOOO MUCH.. :clap::clap::clap:

clydejones:

try this:

#navCatTabsWrapper {
background-color: #fff;
color: #9a9a9a;
background-image: none;
font-size: 1.4em;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}

Except that doesn't work in IE8. Find and upload PIE.htc and add this:

position: relative;
behavior: url(../store/includes/PIE.htc);

Note: I used the includes directory for the script, but you can put it anywhere. The important thing is that the path is relative to the page, not the CSS file.