WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Reduce size of header in custom theme (3 posts)

  1. nathanernest
    Member
    Posted 1 year ago #

    Hi Everybody,

    We have had a custom template made for us at our site http://www.australianinstituteofmagic.org

    Can somebody please visit the site and explain to me how to reduce the size of height of the blue header?

    I've had some experience in making websites before but I don't want to play with things that might cause issues with our site. I'm assuming that this is a field in the style.css but I haven't a clue what to look for. Any tips?
    http://i281.photobucket.com/albums/kk203/nathanernest/AIM/Selection_015_zps8b8febba.png

    Also, our menu wraps over to another line in some browsers and different zoom levels.

    http://i281.photobucket.com/albums/kk203/nathanernest/AIM/Selection_013_zps1ddf4f59.png

    Can I increase the length that the menu has so it wont wrap over to the next line? In some browsers with the correct zoom it looks like I want.

    http://i281.photobucket.com/albums/kk203/nathanernest/AIM/Selection_014_zpsc733fc4a.png

    Please note that IN WINDOWS this will probably work correctly. I have had reports that the page doesn't display properly in Firefox or Chromium in Ubuntu and Safari in OSX.

    Thanks everybody.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The header height is being affected by the padding in this css -- line 133 of style.css:

    #header {
        padding: 40px 0;
        position: relative;
        z-index: 2;
    }

    Reduce the 40 to fit your preference.

    The width of the menu is set in 960.css by this:

    .container_12 .grid_8 {
        margin-left: 40px;
        width: 660px;
    }

    But as you will see if you change it, it jumps to the lower line -- because of the logo on the left. You might be able to get it to be wider by messing around with the CSS in that area -- but be sure to save a copy of your CSS before changing anything. The best way to work with CSS is using a tool such as Firebug -- which lets you look at the CSS and try changes in the browser without making them in the page code yet.

    And BTW, bumping is against the forum rules -- will generally get removed by a moderator...

  3. nathanernest
    Member
    Posted 1 year ago #

    Wow thanks very much! I'm very grateful for your help!

Topic Closed

This topic has been closed to new replies.

About this Topic