PLEASE help – moving menus and removing borders

  • danahderani · Member ·

    Hi there,

    I am currently running my blog under the Nucleare theme. If you visit my site – Panache Offblast – you’ll notice the menus are above my header. I would like to move both of the menus (the navigation tabs as well as my social icons) from above my header to below my header. I’d also like them centered.

    Lastly, how can I remove the faint lined border that’s framed around my posts?

    I’d really like to make these edits ASAP as I’m relaunching my site this week.

    Thanks so much in advance for your help!

    Danah D.

    The blog I need help with is: (visible only to logged in users)

  • danahderani · Member ·

    A couple more things:

    I’d like to move my “Read More” button…

    FROM THIS — TO THIS

    So, I want the button to be centered underneath the text in my post, rather than the bottom right. I’d also like to change what the text reads.

    And I want my Social Media sharing icons to be moved from the bottom left of my posts, to the bottom right (underneath ‘Read More’).

    Thank you!

  • kathrynwp · Staff ·

    Hi there – looks like your first question is a duplicate of https://en.forums.wordpress.com/topic/moving-menu-and-removing-borders. We try to answer CSS questions in order, and by adding another question to your first here, you’ve also taken it out of our “unanswered” queue. :) I’m going to close your other thread and answer all your questions here, but if have any new ones, please start a new thread and avoid posting duplicates or additional replies on the same thread. Thanks! Stand by for replies here. :)

  • kathrynwp · Staff ·

    I’ll answer your questions in batches.

    Lastly, how can I remove the faint lined border that’s framed around my posts?

    I used my browser inspector to identify which elements to hide.

    This should take care of removing the thin grey lines above and below each post:

    .entry-meta {
    border-bottom: none;
}
.entry-bottom {
    border-top: none;
}
  • kathrynwp · Staff ·

    So, I want the button to be centered underneath the text in my post, rather than the bottom right. I’d also like to change what the text reads.

    To change the default “Read more” to something else, normally flip the editor to HTML view and modify the More tag like this:

    <!--more Continue Reading-->

    But I see that you’ve tried to do that already and it’s not working, so let me do some testing and get back to you.

    To centre the link and move it right below your post content, add this to your custom CSS:

    .entry-content p:last-of-type {
  text-align: center;
}

.more-link {
  display: inline-block;
  float: none;
  margin-top: 20px;
  position: relative;
  right: 0;
}
  • kathrynwp · Staff ·

    And I want my Social Media sharing icons to be moved from the bottom left of my posts, to the bottom right (underneath ‘Read More’).

    Give this a try:

    .sharedaddy {
  float: right;
}

    That moves all the social buttons to the right, including the “Likes.”

  • kathrynwp · Staff ·

    I did some testing and research, and unfortunately due to the way the theme was coded, it’s not possible to customize the “Read more” text in Nucleare. Sorry about that.

  • kathrynwp · Staff ·

    I would like to move both of the menus (the navigation tabs as well as my social icons) from above my header to below my header. I’d also like them centered.

    I don’t see an easy way to swap the header and menu positions since the header has a flexible height.

    Could you try sketching out what you mean by having them “centered” so I can better understand what you have in mind? Right now, the main menu is to the left and the social menu to the right, with the entire block centered within the screen.

    You can upload the screenshot – in a graphic format like JPG, PNG, or PDF – in your Media Library, and provide a link so I can see it, or upload it with a service like Cloudup, Imgur or Snaggy.

  • danahderani · Member ·

    Hi there!

    Sorry about duplicating my post. Thank you so much for thoroughly answering my questions and helping me out.

    I have added your notes to my custom CSS and they worked beautifully!

    As for my header/menu issue:

  • I don’t necessarily need them centered, so we can forget about that! I may just remove my social icons, and instead include another page/drop down menu for them.

    • What does a flexible height mean as far as the header? Is there really no way to swap the header and menu bar? I see it on several blogs. I found a code for it yesterday, and it looked good upon preview, but when I saved my edits, my entire page went blank, minus the menu.

    Thanks again for your help!