WordPress.org

Ready to get started?Download WordPress

Forums

Biznez Lite
[resolved] Custom logo size is messing up the header nav bar. (10 posts)

  1. haseeb007
    Member
    Posted 6 months ago #

    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

  2. Gunjan Rai kanungo
    Member
    Posted 6 months ago #

    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

  3. Tikendra Maitry
    Member
    Theme Author

    Posted 6 months ago #

    Hi,

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

    Best,
    Tikendra

  4. haseeb007
    Member
    Posted 6 months ago #

    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.

  5. Gunjan Rai kanungo
    Member
    Posted 6 months ago #

    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

  6. haseeb007
    Member
    Posted 6 months ago #

    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.

  7. Gunjan Rai kanungo
    Member
    Posted 6 months ago #

    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

  8. WPyogi
    Volunteer Moderator
    Posted 6 months ago #

    @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

  9. Gunjan Rai kanungo
    Member
    Posted 6 months ago #

    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

  10. haseeb007
    Member
    Posted 6 months ago #

    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... :)

Reply

You must log in to post.

About this Theme

About this Topic