Premium Joomla Templates
How to specify height and width of logo/header
I am using neutrino template. i tried replacing the default logo with my own logo in the header, as a result the logo or header seems bigger than the default template logo. i find the header and nav bar overlapping.
So, how can i specify the height and width of my header plus how can i avoid overlapping of header and nav menu?
So, how can i specify the height and width of my header plus how can i avoid overlapping of header and nav menu?
The discussion has been resolved.
Accepted Answer
-
Hi Raaman,
You're right - the width of the header is controlled by the parameters you set for the #header div. If your logo exceeds the 125px height, you will need to adjust the height for the #header div to be bigger than your logo height. Of course, you will also need to make the changes mentioned above (for the #logo div) as well...
As an example, I tested this with a large logo (400px by 200px height). Heres the changes to be made:
#header height increased to 240px
#logo height set to 200px
#logo class changed to grid_7
#header_module class changed to grid_9
You can see this in action here: http://cl.ly/MPXf
Tip: Since we're using a 16 column grid, the grid widths should always add up to 16. so if the #logo width is 7, then the #header_module width is 16-7=9.zahir likes this post.
13 responses Add Yours
-
Hi Raaman,
What happens when you change the dimensions of #header in the template.css?
When I change the height, the navbar is going down, so maybe that is also good for you?
#header {
background: transparent url("../images/header_bottom.png") repeat-x 0 bottom;
float: left;
width: 960px;
height: 125px;
padding-top: 0px;
border-bottom: 1px solid #fc3;
} -
Example of how to apply a different class (as mentioned above!):
http://themerepublic.com/forums/question/header-width-adjustment.html
If you're not sure how these things work, then its best to leave it as it is... Or read up on how to modify html markup and css before making modifications so you understand what you are doing. -
Reinstalling joomla would not have fixed the issue for you - its probably something within your css / html markup that may be causing this. FYI, the grid definitions (grid_1, grid_2, etc) can be found in the tr_base.css file which is located under: /templates/tr_neutrino/css/tr_base.css
I would not recommend that you modify the values of any of the grid_xx within the css, you should instead apply a different class to your html markup. -
I have set the height of logo to 200px as below:
#logo { height: 200px; margin: 20px 0 0 20px; }
and i changed the values for logo and header module as below:
<h1 id="logo" class="grid_12 alpha omega">
<div id="header-module" class="grid_4 alpha omega">
But there is no effect in my case. please advice me what could be the reason. pls note underscore is not visible here <h1 id="logo" class="grid_12 alpha omega"> -
You can find the #logo dimensions as set in the template.css file:
#logo { height: 105px; margin: 20px 0 0 20px; }
Change the height to what you need above.
For the width, you can see this thread for more info:
http://themerepublic.com/forums/question/header-width-adjustment.html
Recent Themes
ThemeRepublic.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.
