Custom CSS for Theme Junkie [WP]

HTML & CSS
1

Hello there
I’m used WP 3.8.1 and theme Junkie. But I want to shrink header, I have illustrated here.
Demo: http://demo.theme-junkie.com/blacklight/
I want it like this:

1000×427 272 KB

or
1000×122 25.3 KB

Please guide me custom header in CSS.
Here is me CSS:


/* PRIMARY NAV */
#primary-nav { background-color: #333; height: 38px; }
#primary-nav .nav { float: left; border-left: 1px solid #393939; border-right: 1px solid #292929; }
#primary-nav .nav li a { border-left: 1px solid #292929; border-right: 1px solid #393939; color: #ddd; font-size: 11px; line-height: 38px; padding: 0 17px; }
#primary-nav .nav li a:hover { background-color: #424242; color: #eee; }
#primary-nav .nav li li a { background: #333; border-bottom: 1px solid #292929; border-top: 1px solid #393939; border-left: none; border-right: none; }
#primary-nav .nav li li a:hover { background: #424242; color: #eee; }
#primary-nav .nav li ul { width: 184px; }
#primary-nav .nav ul ul { margin: -40px 0 0 184px; }
#primary-nav .nav .sf-sub-indicator { background: url(images/arrow-down.png) no-repeat; display: block; position: absolute; top: 18px; right: 8px; width: 7px; height: 4px; }
#primary-nav .nav li ul .sf-sub-indicator { background: url(images/arrow-right.png) no-repeat; display: block; overflow: hidden; position: absolute; width: 10px; height: 10px; text-indent: -999em; top: 1.3em; right: 0.4em; }

/* SECONDARY NAV */
#secondary-nav { position: absolute; top: 110px; width: 960px; }
#secondary-nav .nav { background: #333 url(images/bg-secondary-nav.png) repeat-x left center; margin: 0 auto; height: 40px; line-height: 40px; }
#secondary-nav .nav { width: 100%; }
#secondary-nav .nav li a { color: #f0f0f0; font-size: 13px; font-weight: bold; padding: 0 15px; }
#secondary-nav .nav li.first a { background: #fff url(images/ico-home.png) no-repeat 15px 15px; color: #999; padding-left: 29px; }
#secondary-nav .nav li a:hover, #secondary-nav .nav li.sfHover a { background-color: #fff; color: #999; }
#secondary-nav .nav li ul {  }
#secondary-nav .nav li ul ul { padding-top: 0; }
#secondary-nav .nav li li a, #secondary-nav .nav li.sfHover li a { background: #fff; border-bottom: 1px solid #e6e6e6; color: #999; line-height: 1; padding: 12px 15px; text-shadow: 0 1px 0 #fff; }
#secondary-nav .nav li li a:hover { background: #f0f0f0; color: #666; }
#secondary-nav .nav .sf-sub-indicator { background: url(images/arrow-down.png) no-repeat; display: block; position: absolute; top: 18px; right: 5px; width: 7px; height: 4px; }
#secondary-nav .nav li ul .sf-sub-indicator { background: url(images/arrow-right.png) no-repeat; display: block; overflow: hidden; position: absolute; width: 10px; height: 10px; text-indent: -999em; top: 1.2em; right: 0.4em; }
#primary-nav .nav li ul,
#secondary-nav .nav li li a { box-shadow: 3px 3px 0 0 rgba(135, 135, 135, 0.1); }

/* HEADER ICONS */
.header-social-icons { border-right: 1px solid #292929; border-left: 1px solid #393939; color: #ddd; display: block; font-size: 11px; height: 38px; line-height: 36px; text-indent: -9999em; }
.header-social-icons a { border-left: 1px solid #292929; border-right: 1px solid #393939; float: right; display: block; width: 20px; height: 38px; line-height: 38px; opacity: 0.7; filter: alpha(opacity=70); padding: 0 13px; }
.header-social-icons a:hover { background-color: #444; }
.header-social-icons .icon-twitter { background: url(images/ico-header-twitter.png) no-repeat 11px 8px; }
.header-social-icons .icon-facebook { background: url(images/ico-header-facebook.png) no-repeat 11px 8px; }
.header-social-icons .icon-email { background: url(images/ico-header-email.png) no-repeat 11px 8px; }
.header-social-icons .icon-rss { background: url(images/ico-header-rss.png) no-repeat 11px 8px; }

/* 2.3 Header */
header { background: #fff url(images/bg-header.png) no-repeat bottom center; display: block; height: 150px; padding: 10px 0 0px 0;
}
/* Logo */
#text-logo { float: left; margin: 35px 0 0 0; }
#site-title { display: block; float: left; margin: 0 10px 0 0; height: 40px; }
#site-title a { color: #fff; font-size: 30px; }
#site-desc { border-left: 1px dotted #333; color: #999; float: right; font-size: 11px; font-style: italic; line-height: 1; margin: 7px 0 0 0; padding: 0 0 0 10px; text-transform: lowercase; }
#logo { float: left; margin: 10px 0 0 0; overflow: hidden; }
/* Header Search */
#header-search { background: #eee; border: 1px solid #f0f0f0; float: right; margin: 31px 0 0 0; }
#header-search input[type='text'] { background: #fbfbfb; width: 200px; }

Thank you so much.

2

Hi skydanny. Welcome to the forums. :slight_smile:

Personally, I prefer it the way it is currently, but it’s up to you. There are various options, but the easiest is perhaps to add this to your custom.css file:

#primary-nav, header {width: 960px; margin: 0 auto;}

That will leave a few problems that you’ll want to fix. Here are suggestions for those issues:

#secondary-nav {left: 0;}
#header-search {position: relative; right: 30px;}
.header-social-icons {position: relative; right: 15px;}

Alternatively, just remove the line in red below:

.inner-wrap {
margin: 0 auto;
[COLOR="#FF0000"]padding: 0 15px;[/COLOR] 
position: relative;
width: 960px;
}

… or, in the custom.css file, overwrite it with

.inner-wrap {
padding: 0;
}

That will leave you with a few modifications to make, though, like pushing the title a little to the right.

3

Hello ralph.m
I have followed your instructions, and has been.
Thank you so much,
Regards.

4
Off Topic:

A has-been before your time Ralph :slight_smile:

5
Off Topic:

I’m more of a never-was-been, actually. :frowning: