Need help? Check out our Support site, then


Bueno template adding custom nav bar and social media links

  1. smittenwithpretty
    Member

    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. 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. smittenwithpretty
    Member

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

  5. smittenwithpretty
    Member

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

  6. Where do you want the social media icons?

  7. smittenwithpretty
    Member

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

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

  9. smittenwithpretty
    Member

    Ah it worked! Awesome!! Thanks a billion!

  10. smittenwithpretty
    Member

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

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

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

  12. smittenwithpretty
    Member

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

  13. OK, where do you want that?

  14. smittenwithpretty
    Member

    Across the top, underneath the header image

  15. 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;
    }
  16. smittenwithpretty
    Member

    It worked! Ah thank you so much! Seriously you have been so helpful!

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

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

  19. smittenwithpretty
    Member

    I did. Thanks again!

Topic Closed

This topic has been closed to new replies.

About this Topic