Aligning header widget, logo and nav bar

Home Forums Spacious Free Aligning header widget, logo and nav bar

This topic contains 23 replies, has 13 voices, and was last updated by  ashishsthanp 2 weeks ago.

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #519767
    #522742

    Chhabi
    Participant

    Hi wordpressguide,

    Observing the link you had provided, you are using the header logo big in size 640×124 which is quite big size for header logo and we have already made the header logo left aligned. Here is the CSS snippet which makes the menu left aligned and social icons right aligned after the header image.

    #header-right-section {
    float: none;
    }
    .main-navigation {
    float: left;

    Paste the above CSS in Appearance -> Theme Options -> Design -> Custom CSS.
    Hope you can do it as instructed and also rate our theme in this link:https://wordpress.org/support/view/theme-reviews/spacious

    Regards,
    chhabi

    #525617

    wordpressguide
    Participant

    That works. MANY thanks!

    #528408

    Bishal Napit
    Moderator

    @wordpressguide

    Nice to know that the problem is solved. Further query are always welcome in our forum. Thanks.

    #545171

    hi everyone!

    i would do the same that wordpressguide did. this is the website i’m working on http://www.flyingdental.it/
    how can i center the main menu and the logo?
    i tried to copy and paste the CSS code in the CSS box in Theme Options -> Design -> Custom CSS but it didn’t work!

    i hope you can help me,
    anyway, thanks a lot just to answer me 🙂

    have a nice day!

    Fred

    #545629

    wordpressguide
    Participant

    Federico, the code in this thread is for a more complicated setup, where I had something in the header sidebar. For your page,

    If you are not using the header sidebar, I think you just need this , which I found in someone else’s answer (I had my site set up with this before I added the sidebar):

    #header-left-section {
    float: none;
    margin: auto;
    }

    /*centers logo */
    #header-logo-image {
    float: none;
    margin-left: 23%;
    margin-right: 20%;
    }

    .main-navigation {
    float: none;
    margin-left: 21%;
    margin-right: 18%;
    min-width: 70%;
    }

    .main-navigation li {
    padding: 0px 40px 2px 0px;
    text-align: center;
    }

    To tweak the centering of the logo or the navigation bar, you can increase or decrease the margin-left setting.

    #558925

    Bipin Singh
    Moderator

    Hi wordpressguide,

    Thanks for sharing.

    #560675

    hi wordpressguide!

    thank you vey much! i see that something works in your code! it’s not perfect to fit on my website but it works!
    now i will change some parameters and i wil update you.
    anyway, really many thanks for your support!

    have a nice day 🙂

    Fred

    #575021

    Bipin Singh
    Moderator

    Hi federicofredfumaga,

    Great, if there are further query than let us know.

    #1255088

    jvaughn
    Participant

    I am finding that my logo moves left as I tweak margin-left which is good for me trying to center it but anything greater than zero causes my tagline to drip to the next line. Any cure for that? http://dev.isppainting.com/ I’m really trying to get both the logo and the tagline to center.

    • This reply was modified 1 year, 5 months ago by  jvaughn.
    #1255171

    romosamatya17
    Moderator

    Hi jvaughn

    Paste this CSS code in the Custom CSS Box provided through the Customize Options:-

    #header-left-section {
      float: none;
      text-align: center;
    }
    #header-logo-image, #header-text {
      display: inline-block;
      float: none;
    }

    Thanks.

    #1269565

    tomas.ryngl
    Participant

    Hi, is there any way to increase the logo to the middle of the page and reduce the space for the menu? thank you for answer. I need it on the Web http://www.adm.ryngl.cz

    #1269763

    romosamatya17
    Moderator

    Hi tomas.ryngl,

    Paste this CSS code in the Custom CSS Box provided through the Customize Options:-

    #header-left-section {
        float: none;
        text-align: center;
        display: inline-block;
        width: 100%;
    }
    #header-logo-image {
        text-align: center;
        float: none;
    }
    #header-right-section {
        float: none;
    }
    #header-right-section .widget {
        text-align: center;
    }
    #site-navigation {
        float: none;
        text-align: center;
        display: inline-block;
        width: 100%;
    }
    .menu-hlavni-container {
        display: inline-block;
    }

    Thanks.

    #1269765

    tomas.ryngl
    Participant

    Thank you, that’s how it works the way I wanted.

    #1269937

    Hello @tomas-ryngl,

    Glad to know that your issue is solved.
    Feel free to contact us again if issues regarding the theme arises in the future.

    Regrads,
    ThemeGrill Support Team

Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.