WordPress.org

Support

Support » Themes and Templates » [Resolved] Custom logo size is messing up the header nav bar.

[Resolved] Custom logo size is messing up the header nav bar.

  • smhaseeb
    Member

    @haseeb007

    This is my site url: http://hubbytes.com.cp-30.webhostbox.net/

    What I did is I uploaded the logo of size: 237 x 57 px.
    Initially my logo was so small so I added the following css code to make it bigger:

    #header-area img, #content img, .comment img, .widget img {
    height: 67px;
    width: 237px;

    But the above code messed up the nav bar. Please help me to resolve this issue.

    Thanks

Viewing 9 replies - 1 through 9 (of 9 total)
  • Gunjan Rai kanungo
    Member

    @gunjan-rai

    Hi haseeb,

    Please replace this css code

    #header-area img, #content img, .comment img, .widget img {
        height: 52px;
        margin-top: -12px;
        width: 217px;
    }

    from this

    #header-area img, #content img, .comment img, .widget img {
        height: auto;
    }

    in your css file.

    and also replace your logo height width in your style.css file on line no: 454 with this css code

    #logo img {
        height: 52px;
        width: 217px;
    }

    please let us know if you have any issue.

    Best,
    Gunjan

    Theme Author SketchThemes
    Member

    @tikendramaitry

    Hi,

    Thanks Gunjan for contribution.
    Haseeb please let me know if it works for you, I’ll mark it resolved.
    Cheers 🙂

    Best,
    Tikendra

    smhaseeb
    Member

    @haseeb007

    Thanks for the reply Gunjan, your code did solved my issue but partially. After implementing the code that you suggested the logo is getting smaller while we scroll down the page. I do not want the logo to be merged small.
    I want the logo to be as it is and just the navbar becomes slim when we scroll down.

    Also, I will appreciate if you can help me to vertically aligh the menu container to the center always (ie in normal condition of navbar and slim navbar).

    Thanks in advance.

    Gunjan Rai kanungo
    Member

    @gunjan-rai

    Hi Haseeb,

    For Fixing your logo issue please Replace the CSS code in style.css file at line no 486

    #floating_logo {
        float: left;
        padding: 10px 0 0 4px;
    }

    with this

    #floating_logo {
        float: left;
        padding: 10px 0 0 4px;
        width: 188px;
    }

    Also replace the CSS code at line no 448 in style.css file with this code

    #top-head .left-section {
        float: left;
        height: auto;
    }

    Replace the CSS code at line no 450 in style.css<.strong> file with this code

    #top-head .right-section {
        float: right;
        margin-top: 6px;
    }

    Replace the CSS code at

    line no 615 in style.css file with this code

    .fixed-menu #menu-container {
        margin-top: 8px;
        padding-right: 4px;
    }

    Replace the CSS code at line no 446 in style.css file with this code

    #header {
        padding-top: 10px;
    }

    Please let me know if it works for you.

    Best,
    Gunjan

    smhaseeb
    Member

    @haseeb007

    Thank you very much Gunjan….
    I used the following code in relevance to the code mentioned above by you:

    #header {
        padding-top: 0;
    }
    
    #floating_logo {
        padding: 0;
    }
    
    #logo img {
        height: 52px;
        width: 217px;
        margin-bottom: 12px;
        margin-top: 2px;
    }

    It solved my issue…

    You can mark this thread as resolved but before that I have one more query.

    1. How to put some space between my top menu items?

    2. How to change the text color of all website elements?

    Please answer these last questions.
    And thanks for your great support.

    Gunjan Rai kanungo
    Member

    @gunjan-rai

    Hi Haseeb,

    For increasing space between top menu items please increase margin(bold below the CSS code) at line no. 520 in style.css file

    .menu ul li {
    display: inline;
    float: left;
    margin: 0 10px 9px;
    position: relative;
    }

    And for change the text color of all website elements
    change color: #353535; value in body class at line no. 406 and also change color: #353535; value in #content id at line no. 891 in style.css file.

    Thank You

    Best,
    Gunjan

    WPyogi
    Forum Moderator

    @wpyogi

    @haseeb007 – you should be aware that all of these changes to theme files will be overwritten and lost when the theme is updated. It’s strongly recommended that you using a Child Theme or custom CSS to make changes.

    http://codex.wordpress.org/Child_Themes

    Gunjan Rai kanungo
    Member

    @gunjan-rai

    Hi haseeb,

    Yes, your customizations will be lost as soon as you update Biznez Lite.So please do not edit style.css or any other Theme files or
    Templates directly.
    If you want to update your theme, please use WordPress Child Theme concept.
    Read More about Child Theme concept :
    http://codex.wordpress.org/Child_Themes
    http://wordpress.org/support/topic/changing-contact-form-fields?replies=5#post-4589658

    Best,
    Gunjan

    smhaseeb
    Member

    @haseeb007

    Thanks WPyogi for the advice. Actually I’m already prepared for the updates. I’m using this smart plugin called My Custom CSS to customize the themes so my changes are already saved there.
    You can use this too, its a great plugin.

    And last but not the least… Thanks Gunjan for your great support… I like my Indian brothers doing great job on WP….

    Finally my issues are resolved… 🙂

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘[Resolved] Custom logo size is messing up the header nav bar.’ is closed to new replies.