Enlarging Logo Size in Header

  • In the openstrap theme on my website, there is an option to add your own logo to the site. I did so, but it is much too small. When I try enlarging the logo in the code, it makes the whole page too wide with a big empty section on the side.

    Here is the only logo-related code I can find (in the CSS):

    .logo-row{
#margin-bottom:10px;
#max-height:173px;
height:130px;
max-height:130px;
padding-top:5px;

}

    I tried just adding “width:1600px” which made the logo itself large enough but the page too large as well.

    Please please help me out, thank you!!!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    Try finding this:

    .col-md-4 {
    width: 33.3333%;
}

    in openstrap/css/style2/bootstrap.css at line 1396. Change the width to 100% or whatever works for you. It changes the logo size, but I’m not sure what else might change along with it.

    Once you find what works, you should try overriding the CSS from a child theme to protect your changes from theme updates. Simply placing the same directive in a child theme is often enough, or adding the !important modifier in addition.

    Thread Starter alm36

    (@alm36)

    Thank you, but I have no idea what you’re talking about… I’m just using the Editor right on my site and that’s really all I know how to do… Should I be doing something differently? I can’t find the information you’re talking about anywhere.

    Moderator bcworkz

    (@bcworkz)

    Since it is a theme file, you should be able to access it through the editor, but IIRC, it may not be that easy to find. You are probably better off downloading the file via FTP to your local computer, editing it, then uploading back to the server. Then you can keep a backup copy in case the edit does not go well.

    Or you can skip that step and go straight to the child theme solution, which is the proper way to deal with these things anyway. If you review the link, you will see it is not as ominous as it sounds, but it does require using FTP to add a new folder and file.

    Your child theme will only have the one style.css file with the comment header described in the link and the 100% variant of the code I previously posted. You then do not need to locate the bootstrap.css file, your child theme should override it.

    Oh, and if you don’t have an FTP app you’ve been using, you should be able to move files back and forth from your hosting control panel, though the facility may not be labeled FTP, probably something like “File Manager” or similar.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Enlarging Logo Size in Header’ is closed to new replies.