Need help? Check out our Support site, then


Bueno template adding custom nav bar and social media links

  1. Hi, I am new to coding and such and would greatly appreciate any help. I have the code for a custom navigation bar and social media buttons and would like to add them to my page. Any suggestions?
    Thanks!

    The blog I need help with is smittenwithpretty.wordpress.com.

  2. thesacredpath
    Staff

    We would have to see the code you are talking about. CSS is simply a styling document used by the browsers to position and style the elements of a web page. You cannot put anything other that "CSS" stuff into it.

    Paste the code here between code tags per this example:

    <code>all the code here</code>

  3. thesacredpath
    Staff

    First off, the HTML "center" tag was depreciated in HTML 4 and wordpress is now declaring HTML 5 as a doctype so the code will have to be modified.

    Since you didn't put the code between code tags, I can't see all of it.

    The nav bar stuff, would have to be put into a text widget and then CSS positioning used to move it up and into place.

    The same would be true for the social media buttons.

    If you want to put the code into two individual text widgets and put those into your sidebar we can see about moving them up and into position where you want them.

    One thing to remember is that if you have any pages that you have set with a "no-sidebar" page template, they will not have the navigation or the social media buttons. That is because on no-sidebar pages, the entire sidebar and all its contents are gone.

  4. Ok, I understood the second part about what you said and placed the code into two text widgets, its up now. One step closer! Any ideas on how to move it up? Again thank you so very much!

    The part I don't know about is 4 vs 5...

  5. thesacredpath
    Staff

    Where do you want the social media icons?

  6. where they are is fine, i would prefer them to be centered though.

  7. thesacredpath
    Staff

    Open the text widget and at the very beginning before any of your code, put this

    <p style="text-align: center;">

    then go to the very end of all your code and add

    </p>

  8. Ah it worked! Awesome!! Thanks a billion!

  9. will that work on the nav links too? that won't bring them up, right?

  10. thesacredpath
    Staff

    No, the nav links will have to be done separately with CSS.

    I don't see the nav links in your sidebar yet.

  11. I took it off cause it looked funny, if it will help ill put them back up right now.

  12. thesacredpath
    Staff

    OK, where do you want that?

  13. Across the top, underneath the header image

  14. thesacredpath
    Staff

    Go to appearance > custom design > CSS, delete all the informational text in the edit window and paste the following into it and click "preview." You may have to force refresh the preview page as sometimes it does not pick up the change immediately.

    #content {
    padding-top: 50px;
    position: relative;
    }
    
    #text-4 {
    left: 0;
    position: absolute;
    top: -80px;
    width: 100%;
    text-align: center;
    }
  15. It worked! Ah thank you so much! Seriously you have been so helpful!

  16. thesacredpath
    Staff

    You are welcome. If you want to adjust the spacing or anything, let us know.

  17. thesacredpath
    Staff

    Make sure and click "save stylesheet to save the CSS changes we did. They won't show up for the public until you do.

  18. I did. Thanks again!

Topic Closed

This topic has been closed to new replies.

About this Topic