Joomla Templates Club 406,261 posts

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#196567

Hello, here is my site:
http://baico.dev.dnsnetworks.ca/

my client would like a few changes done in the header… first change would be they would like to see the menu items flush against the top of the header (so like this:
also, they want the entire header (blue part) to be thinner, same size as the logo… is this possible?

the reason why is if the user is on high res in the browser and they log into the site they dont see the new releases right away and that’s important for them

can someone help?

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#530027

To change the height of the header, make the following modification to the following CSS rule within your custom.css file . . .


.t3-header {
height: 175px;
padding-bottom: 0;
padding-top: 20px;
position: relative;
}

You can, of course, play around with the pixel value until your client is most happy with the result.

To change the position of the nav menu, make the following modification to the following CSS rule within your custom.css file . . .


.t3-mainnav {
border-left: 0 none;
border-radius: 0;
border-right: 0 none;
bottom: 145px;
float: right;
width: 1000px;
}

Hope That Helps

1 user says Thank You to TomC for this useful post

1. sebbs

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#530037

Thanks Tom!
How do I make the very top black banner thinner?
And how do I make the blue banner thinner, to be just a bit bigger in height then the Baico logo?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#530040

To make the black “topbar” thinner, add the following to your custom.css . . .


#toolbar {
height: 40px;
}

To make the blue banner thinner, play around with the pixel value for the “height” property within the following CSS in your custom.css file . . .


.t3-header {
height: 175px;
padding-bottom: 0;
padding-top: 20px;
position: relative;
}

i.e. make the pixel value smaller – e.g. 160px

1 user says Thank You to TomC for this useful post

1. vasily12

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#530042

Perfect… that’s a bit better (i tried 30px, but that didn’t work! template wont allow it)

Can I make the blue banner thinner?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#530043

<em>@sebbs 420643 wrote:</em><blockquote>Perfect… that’s a bit better (i tried 30px, but that didn’t work! template wont allow it)
</blockquote>

Try 40px . . . that seemed to work fairly well when I tested it.

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#530044

It did ! … that’s what I have now http://baico.dev.dnsnetworks.ca/ ( i was just saying that i tried 30 but that didn’t work …thanks Tom!) … and I’ll try to play around with the blue banner with your top above!

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#530045

.t3-header {
background: none repeat scroll 0 0 #0077BB
height: 125px;
padding-bottom: 0;
padding-top: 10px;
position: relative;
}

I tried that .. but no change at all

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#530046

Hey Tom … check out above the Search menu item and below the flags … there’s a little line that’s showing up
http://baico.dev.dnsnetworks.ca/
see that?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#530047

I just tested out the following, and it worked as it should . . .


.t3-header {
height: 150px;
padding-bottom: 0;
padding-top: 10px;
position: relative;
}

Perhaps you might need to clear your browser cache

1 user says Thank You to TomC for this useful post

1. sebbs

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#530048

weird … I had to remove ” background: none repeat scroll 0 0 #0077BB” for it to work
thanks Tom!

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#530049

<em>@sebbs 420647 wrote:</em><blockquote>Hey Tom … check out above the Search menu item and below the flags … there’s a little line that’s showing up
http://baico.dev.dnsnetworks.ca/
see that?</blockquote>

Yes … it’s a border property within the following CSS rule:


#toolbar .toolbar-ct-3 {
border-left: 1px solid #303030
float: right;
left: auto;
padding-left: 20px;
right: 0;
}

You can get rid of it (cuz it really doesn’t appear necessary to the design) by putting the following in your custom.css:


#toolbar .toolbar-ct-3 {
border-left: none;

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#530050

http://baico.dev.dnsnetworks.ca/
the line is still there…. hmm..
Is there anyway to get everything below the blue banner to come up a little? to remove some of the white space?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#530052

<em>@sebbs 420651 wrote:</em><blockquote>http://baico.dev.dnsnetworks.ca/
the line is still there…. hmm..[/url]

Try clearing your browser cache again.

What does the CSS you entered look like?

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#530053

This is my entire custom.css

@charset “utf-8”;
/* CSS Document */

.col-xs-12.col-md-3.logo.col-sm-6 {
width: auto;
}
col-xs-12.col-md-6.t3-mainnav.navbar.navbar-default.hidden-sm {
width: auto;
float: right;
}
.t3-header {

height: 125px;
padding-bottom: 0;
padding-top: 15px;
position: relative;
}

.t3-mainnav {
border-left: 0 none;
border-radius: 0;
border-right: 0 none;
bottom: 145px;
float: right;
width: 1000px;
}

#toolbar {
height: 40px;
}

[Author]

Posts