• Resolved hodgy06

    (@hodgy06)


    Hi Guys,

    Is it possible to make the maximum logo size larger than 250px x 100px, say like 350px x 100px and make the navibar/menu bar size a smaller percentage of screen size so it doesn’t cover up part of a wider logo?

    Cheers

Viewing 14 replies - 1 through 14 (of 14 total)
  • Yes…First off I’m not an expert…but I did this very thing…there may be better ways to do it than this:

    In the Customize section under Appearance…for logo, uncheck the force dimensions…

    This is the code I used to change the navbar to span8 (instead of span9) and the logo to span4 (instead of span3):

    This goes in your child theme functions.php file:

    /* CHANGE LOGO AND NAVBAR WIDTHS */
    
    add_filter('tc_navbar_display', 'new_navbar_display');
    function new_navbar_display($output) {
    return preg_replace('|navbar-wrapper clearfix span9|', 'navbar-wrapper clearfix span8', $output);
    }
    
    add_filter('tc_logo_text_display', 'new_brand_display');
    add_filter('tc_logo_img_display', 'new_brand_display');
    function new_brand_display($output) {
    return preg_replace('|span3|', 'span4', $output);
    }

    And I had to fix a responsiveness issue because of this change with this code:

    This goes in your child theme stylesheet:

    /* ADJUST RESPONSIVENESS FOR NAVBAR SPAN ADJUSTMENT */
    @media (max-width: 979px) and (min-width: 768px) { .navbar.resp { width: 144%; } }

    YMMV…

    Edit: the php code is not my own…I adapted a code supplied by rdellconsulting in the snippets section…

    Thread Starter hodgy06

    (@hodgy06)

    ok cool. Where do I find the functions.php file for my child theme?

    If your child theme does not have one…you will need to create it via FTP or your host’s file manager…

    Refer to this snippet.

    Thread Starter hodgy06

    (@hodgy06)

    yeah I read that but it didn’t explain where to find the .php file.

    It appears I don’t have one, just the style.css file.

    So do I just add a file in and start it with <?php then add codes after this text?

    If you had one you would see it along with the style.css file.

    Yes…you add it to the same location as the style.css file, basically a blank text file (for now) except for the opening <?php and you will enter your codes after that…make sure the file is named functions.php

    Thread Starter hodgy06

    (@hodgy06)

    Awesome. thanks for your help.

    Do you know roughly what the max width of the logo can be now without interference?

    I’ll let the experts take that one…but…

    I have seen some large logos…but depending on what you are considering, it may require you to place the logo and the navbar on top of each other…there is a snippet that tells how to do that (I believe it is where I adapted the code above from)…so…

    Basically, you need to decide on what your ultimate goal is and then ask a more specific question on how to achieve it…

    Or were you asking for the new span4 value? Span4 represents approx 1/3 of active viewport…the span width changes for viewports 980px and above…and stacks and changes less than that…

    Also…based on your size of logo, you may need to change them to span5 and span7 accordingly…

    This is where the experts are really needed to discuss how all of this acts in its responsive nature…

    Thread Starter hodgy06

    (@hodgy06)

    ok, looks like about 400px wide is right for the span4.

    thanks again for your help

    Thread Starter hodgy06

    (@hodgy06)

    resolved

    Please see last post…I edited it while you were replying…400px is not a hard size…it’s a fluid thing…

    400px in a span4 will work on a 400x(span12/span4) screen = 1200px. It will rescale on smaller viewports.

    Thread Starter hodgy06

    (@hodgy06)

    sorry, I don’t understand that. Too technical for me but using a 400px width worked great for what I wanted with span4, even when I minimized it.
    https://www.energyforlife.net.au/

    Cheers

    If it works for you the it works for me! Well done @deputy05

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Logo and navibar re-size?’ is closed to new replies.