WordPress.org

Ready to get started?Download WordPress

Forums

how do I centre the site navigation menu?? Please help! (25 posts)

  1. Aclizzy
    Member
    Posted 2 years ago #

    Hi there,
    I've just recently installed WordPress and I'm slowly figuring out how everything works. However, I have no clue what so ever how to code and it seems like the only way for me to center the site navigation menu on my site is via the style.css.

    I would really appreciate it if somebody could walk me through this process as I've tried searching the web and implementing the various strategies shown to me but to no avail.

    My theme: Fresh Ink Magazine 1.06 by Adazing Web Design

    Thanks

  2. riversatile
    Member
    Posted 2 years ago #

    What's your Site URL ?

  3. pixelrow
    Member
    Posted 2 years ago #

    Your site address?

  4. Samuel B
    moderator
    Posted 2 years ago #

    find this in theme's style.css

    #menu {
    	background-repeat: no-repeat;
    	position: relative;
    	width: 832px;
    	margin-left: 168px;
    	background-color: #000000;
    	float: left;
    	clear: left;

    change float: left; to float: right;

    it is recommended you create a child theme to modify so as your mods don't get over-written on a theme update
    http://codex.wordpress.org/Child_Themes

  5. Aclizzy
    Member
    Posted 2 years ago #

  6. Aclizzy
    Member
    Posted 2 years ago #

    Samuel B
    That centered it but it also caused the black background that the menu you sits on to move right too. So, now it hangs of the edge of my page??

  7. pixelrow
    Member
    Posted 2 years ago #

    Find this

    #menu {
    background-color: #000000;
    background-repeat: no-repeat;
    clear: left;
    float: right;
    margin-left: 168px;
    position: relative;
    width: 832px;
    }

    Change this:

    margin-left: 168px

    ---
    It would stop the menu going way out.

  8. riversatile
    Member
    Posted 2 years ago #

    This theme is really badly done!

  9. pixelrow
    Member
    Posted 2 years ago #

    Sorry - either delete or set to 0

  10. Aclizzy
    Member
    Posted 2 years ago #

    @Pixelrow
    I followed your instructions, it was already at 168 pixels so I tried 140 etc etc all the way down to 0. That resulted in my background shrinking but it still goes off the page?

    @riversatile

    I'm knew to this, could you please explain why this theme is bad?

  11. pixelrow
    Member
    Posted 2 years ago #

    Now just change it back to float:left. Then should be fine.

  12. Aclizzy
    Member
    Posted 2 years ago #

    Pixelrow,

    I changed it back to float left, and the exact same thing happened on the other side. Bear in mind I have deleted the margin left?

  13. pixelrow
    Member
    Posted 2 years ago #

    Apologies, this is a strange one - try adding this - margin: 0 auto.

  14. Aclizzy
    Member
    Posted 2 years ago #

    I just added ''margin: 0 auto;'' and nothing happened. This is so confusing lol

    I chose this theme because it looks simple and it corresponds slightly with type of website I'm trying to build. But, due to the fact I'm so new it is difficult for me to differentiate between good themes and bad themes.
    Could you recommend a different theme that is simple whereby I'll be able to change the site nav Menu without problems?

  15. Aclizzy
    Member
    Posted 2 years ago #

    please, I really need some advice been trying to figure this out for hours :) and I don't plan on sleeping until its been accomplished.

  16. pixelrow
    Member
    Posted 2 years ago #

    I take it you have figured it out :-) Look ok - or was there something else?

  17. Aclizzy
    Member
    Posted 2 years ago #

    No, I haven't figured it out at all and I followed all your instructions. I've put the default code back for now. As it was looking extremely messy.
    Do you have any other suggestions or do you think I should change theme?
    I wanted to center the site nav menu because I hate it when its on the left.

  18. pixelrow
    Member
    Posted 2 years ago #

    Sorry I am with you now. - You want to center the menu. Its the advice from Samuel B. that was confusing.

    Find this:

    #menu ul {
    float: left;
    position: relative;
    }

    Delete:
    float: left;

    Instead:

    margin: 0 auto;

    Should work fine... this time ;-)

  19. pixelrow
    Member
    Posted 2 years ago #

    Theme wise - definitely change it. I would recommend just using the twentyelven theme.

    Its far better. But you have to get quite good at HTML and CSS if you want to make changes.

  20. Aclizzy
    Member
    Posted 2 years ago #

    Pixelrow, I'm really grateful that your helping :)
    Unfortunately, I did exactly what you said but it didn't change.
    I scrolled quite far down to find #menu ul{. I then deleted float left and replaced with margin: etc . I then pressed update file and refreshed my website.
    Still no change :(

  21. pixelrow
    Member
    Posted 2 years ago #

    I am not sure why that didn't work.....

    Try adding it here
    #greendrop ul {
    margin-top: 0.5em;
    }

    or with the previous - add the float:left - and then add margin: 0 auto;

  22. Aclizzy
    Member
    Posted 2 years ago #

    your right, there is a massive learning curve when it comes to html and Css but this is literally the only thing I want to change on the majority of themes I try as it really bugs me.
    Maybe if I choose another theme, your methods will enable me to change the site navigation menu where all the pages are 'Home, about me etcetc'.

  23. pixelrow
    Member
    Posted 2 years ago #

    I think THIS TIME I have definitely spotted your problem

    Its this bit of code.

    #greendrop {
    display: block;
    float: left;
    margin: 0 auto;
    position: relative;
    text-transform: uppercase;
    }

    Delete this:
    float: left;

  24. Aclizzy
    Member
    Posted 2 years ago #

    oooh when I did the greendrop ul thing ...

    #greendrop ul {
    margin-top: 0.5em;
    margin: 0 auto;

    it caused the menu to go up a bit... like it actually changed the site nav menu but it didn't center it??
    So I think we are getting there
    I'll try the other method now

  25. Aclizzy
    Member
    Posted 2 years ago #

    Okay I set default again.
    then I deleted float left from this section.

    #greendrop {
    display: block;
    text-transform: uppercase;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    position: relative;

    Still nothing
    All this coding is ridiculously confusing, I'm starting to think maybe I'm doing it wrong. Is there anyway I can create a new user and you can try and sort it?

Topic Closed

This topic has been closed to new replies.

About this Topic