PLEASE help – moving menus and removing borders

  • Author
    Posts
  • #2851016

    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 panacheoffblast.com.

    #2851133

    danahderani
    Member

    A couple more things:

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

    FROM THISTO 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!

    #2851259

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

    #2851260

    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;
    }
    #2851263

    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;
    }
    #2851264

    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.”

    #2851265

    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.

    #2851266

    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.

    #2851272

    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!

#2851273

kathrynwp
Staff

Thank you so much for thoroughly answering my questions and helping me out.

You’re very welcome!

What does a flexible height mean as far as the header? Is there really no way to swap the header and menu bar?

I ran this by two colleagues, but none of us sees a good way to swap the menu and header with CSS. As you make the browser smaller, the header resizes gradually.

I see it on several blogs.

Some themes are designed to display the menu below the header. If you saw this on another site running Nucleare, please provide the link so I can take a look.

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.

Can you paste the code here between code tags?

#2851275

danahderani
Member

Hmm.

Can you perhaps recommend some similar themes – I really like the clean, minimal look of Nucleare – that have the menu automatically displayed below the header? I’d love for my blog to still look the same/at least similar with a new theme if possible, but have the header/menu swap.

I can’t for the life of me find the code I used. I went to my CSS revisions but can’t figure out which one it is…

#2851276

kathrynwp
Staff

Button is one possibility:
https://buttondemo.wordpress.com/

The demo doesn’t show the header, but this is what it looks like on my test site:

https://cloudup.com/cO79l7qI0SC

Button also has a centered “Continue reading” link below each excerpt, and lets you choose between excerpts and the full post in the Customizer’s Content Options panel, so it might be a good fit that way too.

Hemingway Rewritten is another option:
https://hemingwayrewrittendemo.wordpress.com/

You can see more free two-column themes here:

https://wordpress.com/themes/filter/blog+two-columns/type/free/

Here are some things to know before switching themes:

https://en.support.wordpress.com/themes/#switch-themes

#2851277

danahderani
Member

Wonderful, thank you so much!

I’ve read what I need to know about switching themes but just have one last question —

I understand custom CSS is theme-specific, but in the case I still need to use one or more of the codes that are currently added, can I use the same ones or do I need to come back here for a new code that’s catered to my theme?

#2851279

kathrynwp
Staff

I understand custom CSS is theme-specific, but in the case I still need to use one or more of the codes that are currently added, can I use the same ones or do I need to come back here for a new code that’s catered to my theme?

It depends! Some CSS may be transferable between themes, so give it a try first. If it doesn’t work, you can start a new thread and we’ll be glad to help.

#2851281

danahderani
Member

Thanks so much for your help Kathryn!

#2851282

kathrynwp
Staff

My pleasure and good luck!

The topic ‘PLEASE help – moving menus and removing borders’ is closed to new replies.