Center align in navigation bar

  • Author
    Posts
  • #1320011

    nscall
    Member

    Hello, I’m using the Adele theme, and no matter what classes I use in the css I can’t center the menu links! Can anyone help?!

    The blog I need help with is radiantrambler.com.

    #1320082

    nscall
    Member

    I’d also like to know if there’s any way to change the color or remove the two green lines underneath the entry-meta. I searched for the class that affects them but nothing changed.
    Thank you!

    #1320121

    justpi
    Member

    To center the menu items:

    #site-navigation .menu {
        margin-left: 0;
    }
    .navigation-main ul {
        text-align: center;
    }
    .navigation-main li {
        display: inline-block;
        float: none;
    }

    To remove the lines below the comment area:

    .hentry:after, body.single .content-area:after, .hentry footer:after, body.single .site-content:after {
        border-color: transparent;
    }

    #1320127

    nscall
    Member

    Thanks so very much!!

    #1320149

    justpi
    Member

    You’re welcome.

    Since you centered the top menu, I think you should center the footer credits as well:

    .site-info {
        margin-left: 0;
        text-align: center;
    }

    #1320257

    nscall
    Member

    Can you also tell me if I can replace the ribbon in the navigation bar with another? (replace the background image)

    #1320264

    justpi
    Member

    It’s not an image, it’s just bg color (with a couple of extra sections left and right to create the endings). So, what exactly do you want to do? change the color? make it a normal rectangle? or use a very different image?

    Note (in case you don’t get a reply by someone else in the meantime): I won’t be available for a day or two.

    #1320270

    nscall
    Member

    I realised it’s a bg color but I couldn’t remove these extra sections you said on the left and right. I want to add a different image and remove the ribbon in the site-footer completely if that’s possible. Thank you.

    #1320271

    justpi
    Member

    a) To remove the extra sections from the top menu and the footer credits, add this:

    .navigation-main:before, .navigation-main:after, .site-footer:before, .site-footer:after {
        display: none;
    }

    Do you know how to remove the bg color and add your own bg image after you do this?

    b) To remove the rest of the bg in the footer credits, add this:

    .site-footer {
        background-color: transparent;
    }

    This will make the credits invisible (since the text is white), so you’ll also need to add this (replacing 123456 with the hex for the color you prefer):

    .site-info, .site-info a {
        color: #123456;
    }

    But this way the credits will float in space in a strange way. I think you do need a bg – or maybe a border.

    #1320285

    nscall
    Member

    Thank you so very much! I’ll see what I’ll do with the credits, my main point was the background in the navigation! Thanks again!

    #1320286

    nscall
    Member

    I’m having another issue as well but it’s not a theme problem. I made another thread but no one answered me.

    I’m customizing this theme in Chrome but now I saw in other browsers that many elements look out of place. The common thing is that it looks the same in firefox/opera/safari but different in chrome. I f I change it to look good in those 3 browsers it won’t look good in chrome. Any opinions on what I should do?

    #1320287

    justpi
    Member

    You’re welcome.

    Very few volunteers answer CSS questions, and we volunteers reply if we are around, if we can, and if we feel like it. The only staff member responsible for answering all CSS questions is designsimply: she cannot possibly reply to all the questions as promptly as users might prefer. So what you should do is think of “no one answered” as “no one answered yet“, make the question in the other thread more specific (what exactly looks out of place?), and wait!

    #1320298

    It would definitely help to zero in on a specific example to start with. Since this is a new issue, let’s move the discussion about it to https://en.forums.wordpress.com/topic/cross-browser-issues?replies=3

The topic ‘Center align in navigation bar’ is closed to new replies.