Joomla Templates Club 406,261 posts

[jclivingstone Friend jclivingstoneJoin date: February 2008Posts: 39Downloads:0Uploads:0 Thanks: 4 Thanked: 1 times in 1 posts]

#149187

Hi there

Firstly I think this is a great looking template. One problem I do have however is that the main nav bar is above the logo position.

Many people find this annoying as your logo gets covered up every time you use a drop down.

How can I move the logo and search line above the main nav bar?

[histeriks Friend histeriksJoin date: December 2009Posts: 285Downloads:0Uploads:3 Thanks: 16 Thanked: 114 times in 87 posts]

#334742

jclivingstone;167561Hi there

Firstly I think this is a great looking template. One problem I do have however is that the main nav bar is above the logo position.

Many people find this annoying as your logo gets covered up every time you use a drop down.

How can I move the logo and search line above the main nav bar?

Hi jclivingstone,

open your template.css file, located in your /templates/ja_rasite/css/ directory, and replace code from line 1187 to 1252 with this:

/* HEADER
--------------------------------------------------------- */
#ja-header {
position: relative;
margin-top: 10px;
z-index: 10;
}

#ja-header .main {
height: 60px;
padding: 0;
position: relative;
}

h1.logo, div.logo-text h1 { font-size: 250%; line-height: 1;}

h1.logo, div.logo-text { float: left; z-index: 1; position: relative; }

/* Logo Image ---*/
h1.logo { height: 51px; margin-top: 0px; margin-left: 10px; width: 187px; }

h1.logo a {
background: url(../images/logo.png) no-repeat left;
display: block;
height: 51px;
width: 187px;
top:0px;
position: absolute;
}

h1.logo a span { position: absolute; top: -1000px; }

/* Logo Text ---*/
div.logo-text { margin-top: 8px; }

div.logo-text h1 a {
color: #ccc;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}

p.site-slogan {
background: #444;
color: #999;
display: block;
font-size: 85%;
letter-spacing: 1px;
margin: 8px 0 0;
padding: 0 5px;
text-align: center;
text-transform: uppercase;
}

/* NAVIGATION
--------------------------------------------------------- */
/* Main Nav ---*/
#ja-mainnav {
background: url(../images/mainnav-bg.gif) repeat-x left top;
font-family: Tahoma, Verdana, Tahoma, sans-serif;
height: 36px;
line-height: 1;
padding-top: 10px;
position: relative;
top: 51;
z-index: 900;
}
I guess this will be sufficient. Test and adjust according to your needs 🙂

2 users say Thank You to histeriks for this useful post

1. cansay
2. valdez79

[jclivingstone Friend jclivingstoneJoin date: February 2008Posts: 39Downloads:0Uploads:0 Thanks: 4 Thanked: 1 times in 1 posts]

#334767

<em>@histeriks 167580 wrote:</em><blockquote>Hi jclivingstone,

open your template.css file, located in your /templates/ja_rasite/css/ directory, and replace code from line 1187 to 1252 with this:

/* HEADER
--------------------------------------------------------- */
#ja-header {
position: relative;
margin-top: 10px;
z-index: 10;
}

#ja-header .main {
height: 60px;
padding: 0;
position: relative;
}

h1.logo, div.logo-text h1 { font-size: 250%; line-height: 1;}

h1.logo, div.logo-text { float: left; z-index: 1; position: relative; }

/* Logo Image ---*/
h1.logo { height: 51px; margin-top: 0px; margin-left: 10px; width: 187px; }

h1.logo a {
background: url(../images/logo.png) no-repeat left;
display: block;
height: 51px;
width: 187px;
top:0px;
position: absolute;
}

h1.logo a span { position: absolute; top: -1000px; }

/* Logo Text ---*/
div.logo-text { margin-top: 8px; }

div.logo-text h1 a {
color: #ccc;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}

p.site-slogan {
background: #444;
color: #999;
display: block;
font-size: 85%;
letter-spacing: 1px;
margin: 8px 0 0;
padding: 0 5px;
text-align: center;
text-transform: uppercase;
}

/* NAVIGATION
--------------------------------------------------------- */
/* Main Nav ---*/
#ja-mainnav {
background: url(../images/mainnav-bg.gif) repeat-x left top;
font-family: Tahoma, Verdana, Tahoma, sans-serif;
height: 36px;
line-height: 1;
padding-top: 10px;
position: relative;
top: 51;
z-index: 900;
}
I guess this will be sufficient. Test and adjust according to your needs :)</blockquote>
Dude. You’re a legend. Thanks for that. One problem however, how do I get the dropline menu to follow suit? As you can see http://jandsl.com/TMG/CRL/ the dropline stays above the header while the menu is below.

[prosilient Friend prosilientJoin date: April 2010Posts: 1Downloads:0Uploads:0]

#340115

Any news on getting the dropline menu to follow ?

[jclivingstone Friend jclivingstoneJoin date: February 2008Posts: 39Downloads:0Uploads:0 Thanks: 4 Thanked: 1 times in 1 posts]

#340249

Nope. In the end I created another menu and placed it below.

[cansay Friend cansayJoin date: February 2010Posts: 183Downloads:2Uploads:32 Thanks: 20 Thanked: 19 times in 1 posts]

#340708

PERFECT SOLUTION for me also 😀

THX ALOT.

Do I have to change anything for this to work for my mobile users?

How do I change the width of the background image ?
It looks a bit stupid If the background stretches the entire site 😀

I tired to remove
background-repeat:repeat-x;

And use the information in this link
http://stackoverflow.com/questions/1341358/set-size-on-backgroundimage-with-css

But I couldent get it working 🙁

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#340952

Dear Cansay!
<blockquote>
How do I change the width of the background image ?
It looks a bit stupid If the background stretches the entire site </blockquote>

I have not clear understandable on your issue please give me the snapshort !

Thanks

[Author]

Posts