The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

Increase Logo size (19 posts)

  1. trendyrevels
    Posted 3 years ago #

    Is there any way to make the logo appear larger? The jpg I have uploaded is 250 by 100 but it still seems to look a bit undersized and awkward. I have the logo in multiple sizes but it doesn't seem to look any different with other sizes.

    Website here: http://www.writeeditor.net/

  2. mindovermattersound
    Posted 3 years ago #

    I'm with you trendyrevels! I'd like to have my logo centered and above the navigation, like it does when the window is resized horizontally to a narrow enough width that the nav bar collapses into the drop down button.

    Anyone know how to override these settings in a child stylesheet?

    Website here: mindovermattersound.com

  3. iamacyclist
    Posted 3 years ago #

    I also would like to change the size of the logo.

  4. rdellconsulting
    Posted 3 years ago #

    I've downloaded your logos and investigated as follows:

    @trendyrevels, your .jpg is exactly 250px x 100px. Customizr has a tickbox to limit size to that dimension, so if you untick the box it still displays at that size. What size do you want? Can you produce a larger .jpg using a picture editor (eg Photoshop)?

    @mindovermattersound, your .png is 899px x 125px. What size do you want?

    The actual code generated is allowing about c25% for the brand/logo & c75% for the navbar. (It's actually 23.0769% as set by Twitter Bootstrap grids).

    If you try the following:

    .navbar-wrapper .brand {width:23%; float:left;}
    .navbar-wrapper .navbar {width:77%; float:right}

    By increasing the .brand width>23% forces a bigger logo (depending on width of jpg/png, but results in an extra line for the .navbar. By playing with these 2 widths, I can work different layouts.

    Making both width:100% moves the logo to it's own line and centers it, with a full-width navbar beneath.

    You may need to adjust margin/padding.

    Hope this works for you.

  5. iamacyclist
    Posted 3 years ago #

    Just was I was looking for.


    CSS custom for changing the logo and navbar:

    /* logo (change width from 0-100%; float from left/center/right) */
    .navbar-wrapper .brand {width:100%; float:center;}

    /*menu bar size*/
    .navbar-wrapper .navbar {width:99%; float:center}

    /*menu bar text */
    .navbar .nav {
    display: block;
    float: right;
    left: 0;
    margin: 0 10px 0 0;
    position: relative;

    Thanks a lot!!!

  6. aliyarose
    Posted 3 years ago #

    ah this is perfect! the answer I was looking for. anyone know the css to move the social icons to the right (aligned right) to sit with the menu bar text?

  7. rdellconsulting
    Posted 3 years ago #

    .social-block.span5{float:right}; will move the social icons as you've requested.

  8. rdellconsulting
    Posted 3 years ago #


    Sorry, semicolon was in wrong place.

  9. aliyarose
    Posted 3 years ago #

    thanks! is there anyway to get them to move over more... to be aligned with the side of the screen? right now they appear to be floating in the middle of the bar?

    also do you know how to remove the border around the nav bar?

    thanks again for your quick reply!

  10. leandi_vdw
    Posted 3 years ago #

    Where exactly can you enter this CSS code to change the logo and menu bar? I'm quite new to changing the CSS code so not sure exactly where to change this to run over all pages.


  11. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    In the "Custom CSS" part of the dashboard.

  12. jolieaparis
    Posted 3 years ago #

    Hi there,

    Does anyone know how to get the tagline to appear under the logo once it's centered? Essentially I'd like the logo and nav bar to appear like they do on smaller screens, with the logo and tag line centered, and the menu items only visible in a drop down.


  13. Npalamidis
    Posted 2 years ago #

    Hello everybody,

    I'm also trying to increase my logo size a little bit to at least 350px wide.

    I've try the solutions you propose here with no luck.

    My website is:


    Any help is greatly appreciated.

  14. rdellconsulting
    Posted 2 years ago #

    @Npalamidis. It's currently showing as 365w x 700h!

    Start a new topic if you need more help please.

  15. lohaus
    Posted 2 years ago #


    Pasting your code:

    .navbar-wrapper .brand {width:23%; float:left;}
    .navbar-wrapper .navbar {width:77%; float:right}

    into the custom CSS box and reversing the proportions
    (brand width:77%, navbar width: 23%)
    got poor results for me:
    the logo image is still displayed first,
    then the navbar beneath it.
    Even if I set them so that their total is less than 100%, same results.

    Ideally I would like to have them both at the top of the page, at the same level
    with the navbar large enough only to show the button (and dropdown menu).



  16. mchristian6
    Posted 2 years ago #

    Hi, I'm having problems as well. Changing the second percentage affects the tagline, but changing the first percentage does not affect the logo at all.


  17. rdellconsulting
    Posted 2 years ago #

    Please start a new topic.

  18. joeyjamz
    Posted 2 years ago #

    Hey guys - I am creating my own logo right now to use in this theme, but I don't know what to dimensions to make it. What dimensions should I use when creating a logo for this theme? (Customizr)... Because I obviously don't want it getting stretched out or squished down. So if anyone could help me and let me know what the ideal height and width should be that would AMAZING! Thank you so much!


  19. rdellconsulting
    Posted 2 years ago #

    Please start a new topic next time.

    It's really up to you. There is a checkbox that forces dimension to 250 x 100px max, so a 2.5:1 would work. But no restriction really, and depends on how you use the Navbar etc in the Heading.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic