Premium Joomla Templates

  • Categories
    View categories that are created for the site and filter discussions by categories.
raaman on Friday, January 11 2013, 06:34 AM

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?
The discussion has been resolved.

Accepted Answer

  • Replied by zahir on Friday, January 25 2013, 12:01 AM
    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:

    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.

    2 votes by zahir, raaman

  • Replied by tantemar on Thursday, January 24 2013, 12:38 PM · Hide · #1
    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;
    2 votes by raaman, zahir
  • Replied by raaman on Monday, January 28 2013, 08:19 AM · Hide · #2
    thanks zahir and tantemar, this solution works for me. but i'm not sure why the grid changes did not work for me.
    1 vote by raaman
  • Replied by raaman on Tuesday, January 22 2013, 01:34 PM · Hide · #3
    helo Zahir, since u r expert in using this template. i just wanna know if there is other way round to change the logo height and shift hnav and other following contents according to logo?
  • Replied by raaman on Monday, January 14 2013, 08:37 PM · Hide · #4
    i tried the solution given in the link but didn't work for me. i wonder why it is not working in my case.
  • Replied by zahir on Monday, January 14 2013, 05:09 PM · Hide · #5
    Example of how to apply a different class (as mentioned above!):

    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.
  • Replied by raaman on Monday, January 14 2013, 08:56 AM · Hide · #6
    i don't understand how to override template css. anyway, can you give me an example how i can apply different class?
  • Replied by zahir on Saturday, January 12 2013, 09:09 PM · Hide · #7
    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.
  • Replied by raaman on Saturday, January 12 2013, 09:22 AM · Hide · #8
    i have tried this even in a fresh install of joomla but its not working. i tried to change the properties of container_16, grid_6 etc ... in 960.css but nothing is happening. i don't understand where this css class grid_6 alpha omega is defined.
  • Replied by zahir on Friday, January 11 2013, 10:49 PM · Hide · #9
    Technically, the above should work. Its difficult to diagnose why this isn't working if we cannot see the site...
  • Replied by raaman on Friday, January 11 2013, 10:31 AM · Hide · #10
    its not a live site, i am testing it in my local server
  • Replied by zahir on Friday, January 11 2013, 09:46 AM · Hide · #11
    Can you post a link to your site please?
  • Replied by raaman on Friday, January 11 2013, 09:41 AM · Hide · #12
    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">
    Replied by zahir on Friday, January 11 2013, 09:02 AM · Hide · #13
    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:
Your Response
Please login first in order for you to submit comments

Recent Themes

The Joomla!™ name is used under a limited license from Open Source Matters in the United Statesand other countries. is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.