WordPress.org

Forums

discover
Increasing Header Image Size (17 posts)

  1. eDruid
    Member
    Posted 3 years ago #

    Has anyone figured out how to increase the Header Image from 220x75px?

    Love this theme, I just dont like how the Header is so small. I think 350x 100 or even a but larger would be nicer.

    Ive been trying to mess with the developer tools on chrome and I've seem to locate the issues under <div id="header_container">. It seems the Header is is part of a <div> called "row" and when I try to make the box larger, the 4 smaller boxes on the bottom move crazy.

    Ill keep trying but I could use some back up on this. If anyone else has figured out how to address this please post. Also if anyone has any ideas I can try, It would be very helpful.

    This is what I got tonight from working on it. Still cant get it the width I want it but give it a try and see what you can do:
    ___________________________

    #header_container {
    padding-bottom: 15px;
    height: 125px;
    }

    #menu_container {
    width: 650px;
    }

    #logo img {
    width: 350px;
    height: 100px;
    }
    _____________________________
    MyWebSite
    Still under construction, but the purpler box is what im trying to make wider so it almost aligns with the slider image box.

    Thanks!

  2. wp-21
    Member
    Posted 3 years ago #

    Please post a link to your site as it we have to look at your code in order to suggest a solution.
    Thanks.

  3. eDruid
    Member
    Posted 3 years ago #

    whoops didnt think of that, Thank you.

  4. wp-21
    Member
    Posted 3 years ago #

    Hi, sorry i didn't see the link which you already had pasted above.
    You need to increase the width, you need to do this,

    In your foundation.css stylesheet on th line 269 there is a class as below:

    .three, .row .three {
        width: 25%;
    }

    this is why you are not able to increase the size because the parent container is set to 25% width.now to override for only the header portion you need to attach the id #header_container
    before the class,then you would be able to change the width without changing rest of the elements on your site where the above class is being used.So you will do this,

    #header_container .three, .row .three {
        width: 25%;
    }

    and increase the width to whatever you like.

    Thanks.

  5. manish_gori
    Member
    Theme Author

    Posted 3 years ago #

    In Header.php file on line 30 , change three columns to say four or five, to increase width of logo. And simultaneously, one line 45 change nine to eight or seven. Note: Total of both has to be twelve(which is the total width both logo and menu make)

  6. BJJ KNIGHT
    Member
    Posted 3 years ago #

    @manish_gori Hi Manish, forgive my stupidity but I can't seem to see where to insert on line 45 a value? I'm not too familiar with PHP, if you could give us an example that would be great.

    Thanks

  7. BJJ KNIGHT
    Member
    Posted 3 years ago #

    Aplogies managed to locate where you were referring to...

    <!--top menu-->
    <div class="nine columns" id="menu_container" >

  8. eDruid
    Member
    Posted 3 years ago #

    Thanks for the response everyone! Had some time today to sit down and try this out again.
    _____________________________________________________
    wp-21, Your idea about:

    before the class,then you would be able to change the width without changing rest of the elements on your site where the above class is being used.So you will do this,

    #header_container .three, .row .three {
    width: 25%;
    }
    and increase the width to whatever you like.

    It worked but it messed up the position of the 4 blocks at the bottom making them go from their orignal 4x1 too 2x2 grid.
    ____________________________________________________

    manish_gori, your idea worked perfectly and i was able to find the lines to edit with no trouble. Now that the logo is larger and nothing gets moved around its exactly what I wanted.

    Though now I find a new problem that I am not sure what the image size is to fit in the spot. I tried making a vector image both in 220x75px (recommended) and in 400x100px but im guessing because of the width being in % its getting stretched and blurred. I also like to mention I've tried JPGS and PNG, both blur.

    My Web Site

    What is the image size I should be uploading for the header if these are my settings so it wont blur?:

    h1 {
    font-size:2.5em;
    color: black;
    }

    .flex-caption {
    background: rgba(0,0,0,1); /* Change the "3" to a higher number to make it darker*/
    }

    #slider_container p{
    text-align: justify;
    }

    #header_container {
    padding-bottom: 15px;
    height: 125px;
    }

    #menu_container {
    width: 650px;
    }

    #logo img {
    width: 400px;
    height: 100px;
    }

    AND ALSO, The change I did to the "header.php" was:

    <div class="four columns">

    <div class="eight columns" id="menu_container" >

    _______________________________________________________________

    Thanks so much with your help everyone. I hope this thread is benefiting others as much as it is me.

    Thank You

  9. T89LunarWolf
    Member
    Posted 3 years ago #

    I'm getting a similar issue. I put in the image and it ends up moving my menu bar. This is my code for the site.

    <div class="four columns">
    
    <div class="eight columns" id="menu_container" >

    The site is here

    Still a work in progress and I'm still learning. Any ideas?

  10. dianaascher
    Member
    Posted 3 years ago #

    I’d like to make the same adjustment, but my header.php is locked. I’m sure it’s something obvious to you all, but I can’t access it. Any ideas?

    temporary site:
    http://behavioralpolicy.org/behavioral-science-policy-2/

  11. dianaascher
    Member
    Posted 3 years ago #

    Resolved by pulling into Word and making changes to column div classes.

  12. Ricky7524
    Member
    Posted 3 years ago #

    hi, t89LunarWolf
    how did you resolve your issue?

  13. dorncog
    Member
    Posted 3 years ago #

    I am attempting to use a bigger logo as well. I have edited the header.php with the following changes:

    <div class="four columns">
    <div class="eight columns" id="menu_container" >

    I have also changed the style.css:

    #header_container{
    	padding-bottom: 25px;
    	padding-top: 15px;
    	background: #fff;
    	height: 125px;

    I upload a bigger logo, but it still gets scaled down, and then is blurry as it tries to fill the space. How do I use a bigger logo?

    Thanks!

  14. dorncog
    Member
    Posted 3 years ago #

    Just letting you guys know that I figured it out.

    In the functions file, I had to change the dimensions for the header uploader, to match the dimensions of my logo.

    Keep in mind, you also have to edit the #logo img in the CSS.

  15. T89LunarWolf
    Member
    Posted 3 years ago #

    For the administrator or moderator for this thread, please delete my post or at least my link to my website. I have already fixed my problem and do not need further help.

    For other who are still looking for solutions, the key is via the header.php file

    <div class="four columns">
    <div class="eight columns" id="menu_container" >

    Change these and they should allow you to "scale" the size of the logo. However, this was specific to my problem and may not work for you.

  16. FVW
    Member
    Posted 2 years ago #

    I have a related question:
    Would it be possible to change the header, so that I can insert a full width logo (or several logos) and below a full width navigation?

    That would be great!
    Thanks!

  17. daniellevdkem
    Member
    Posted 2 years ago #

    Has anyone solved this yet? I haven't been able to make my logo appear larger without it being overstretched or unsharp for some reason.

    JPEG is the best format to use, right? Or is TIF better? I

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic