Need help? Check out our Support site, then


Twenty Eleven: how to make changes to the menu bar

  1. Hi

    I am currently trying to make changes to my site which is tracyfox.co.uk using the css upgrade.

    I have re-aligned the site title and description so that it is lined up with the header image and I would like to move the page names in the menu over to the left but can't work out how to do it.

    Also, I would like to be able to change the font size of the page names in the menu.

    Any help will be appreciated.

    Thanks in advance

    Tracy

    The blog I need help with is tracyfox.co.uk.

  2. I would like to move the page names in the menu over to the left but can't work out how to do it.

    This should do the trick:

    #access div {
    	margin: 0;
    }

    I found it by clicking on things in the web inspector until I found the right container element with a large margin value.

    To learn how to use the web inspector, see http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

  3. Also, I would like to be able to change the font size of the page names in the menu.

    Here's an example to get you started:

    #access ul {
    	font-size: 1.1em;
    }

    Adjust the 1.1em value as needed.

  4. Hi Designsimply

    Many thanks again for your help - it is much appreciated.

    I have added the first set of code to move the text over to the left which is great but when I now hover over the first page name 'Hand Dyed Fabric' the background colour is wider than the text & header and doesn't maintain the left hand margin. Could you help?

    I have also added the code to change the font size which has worked perfectly - thanks again.

    Why is font-size sometime measures in px and sometimes in em? What exactly is em?

    Thanks

    Tracy

  5. Looks like there's some extra padding on the links inside the menu bar that have some padding that make them fall outside the edges.

    Here is some CSS you can add to just the preview to visualize the borders of things:

    #access {
    	border: 1px dashed blue;
    }
    #access a {
    	border: 1px dashed red;
    }

    Once you've used that to see the edges, remove it and find the "#access div" rule. Try changing "margin: 0;" to "margin: 0 0 0 .9em;"

    Why is font-size sometime measures in px and sometimes in em? What exactly is em?

    This is a good explanation: http://css-tricks.com/why-ems/

    And this: http://www.w3.org/WAI/GL/css2em.htm

  6. Hi

    Before I make any more changes I think I may have introduced a problem but I don't know what is causing it.

    When you now hover over the parent page name in the menu bar the child pages appear but when you try to hover over them to select they disappear.

    Any thoughts why this is happening and how I can fix it?

    Tracy

  7. That's my fault. When I posted the font-size example for the main menu before, I didn't realize the submenu spacing would also be affected. That's happening because it uses the font size a a base so when we changed it for the parent element, it affected the submenu spacing too.

    You can fix it by adjusting the "top" em value for submenus to be just a bit smaller like this:

    #access ul ul {
    	top: 3em;
    }
  8. Hi

    I have copied and pasted

    #access ul ul {
    top: 3em;
    }

    into my CSS sheet and it seems to have fixed it - thank you so much.

    I still haven't been able to fix the alignment of the background when you hover over the page 'Hand Dyed Fabric'.

    I have tried every combination of margin size in the different groups that I have in the CSS but the best I can come up with is how it looks now with the following

    #access {
    background-image: none;
    box-shadow: none;
    }

    #access ul {
    font-size: 1.1em;
    }

    #access ul ul {
    top: 3em;
    }

    #access div {
    margin: 0 0 0 0.5em;
    }

    #access a {
    display: block;
    line-height: 3.333em;
    padding: 0 1.2125em 0 0.9em;
    text-decoration: none;
    }
    What I want is for the page name text 'Hand Dyed Fabric' to be aligned the same as the site title 'tracy fox' and the green background colour to be aligned with the header image (hope I have described this correctly). Can this be done?

    tracy

  9. Aaahhh.....

    Just noticed that the child pages now have a pale background colour and borders around them when you hover over.

    How can I fix this?

    Thanks

    tracy

  10. Update:
    After A LOT of trial and error, I eventually added some code which I think fixed the child pages having a border, shadow and background colour - I am worried that I may not have added the right code in the right place.
    I would be very grateful if you could check I haven't caused additional problems which seems to be happening to me!
    tracy

  11. Let's just look at one issue at a time.

    I suggested this CSS to move the menu to the right so that the menu item background doesn't extend past the header image on the left:

    margin: 0 0 0 .9em;

    However, you added this instead:

    margin: 0 0 0 .5em;

    The number is not the same. However, keep in mind there are multiple ways to get similar results in CSS :) and I think setting the left margin for both the container div and the list itself might work better than that other change. Here's how to fix it:

    Find "#access div" and change "margin: 0 0 0 .5em;" back to "margin: 0;"

    Then find "#access ul" and add this:

    margin-left: 0;

    What that will do is set both the container div for the main menu as well as the main menu list ("ul") flush left with the header image (which you can see if you look at those red and blue dashed lines in a live preview).

    In your original request, you said you wanted to move the menu to the left, but I'm not sure that's an accurate enough description of what you were trying to do. Were you trying to move the menu itself to the left and also get rid of the padding on the left side of the first menu item so that the text "Hand Dyed Fabric" is flush left with the header image?

  12. ok.... the changes I am trying to achieve with the menu bar.....

    I did add the exact code you suggested of margin: 0 0 0 .9em; initially but then played about with it to try and get what I wanted which I still haven't managed!

    What I am trying to achieve with the menu is for the text on the left to be vertically aligned just slightly in from the start of the header image.

    1. I gave the site title 't r a c y f o x' a left hand margin of 0.5em which moved it over just enough and I am trying to now make all other text which starts on the left to be vertically aligned with that.

    2. The first page name in the menu 'Hand Dyed Fabric'. I would like the start of this text to vertically align with the site title (as described above) AND for the left hand edge of the background olive green colour that appears when you hover over it to be exactly aligned with the start of the header image.

    Hope this makes sense.

    This is the code that is currently in my CSS sheet.

    #searchform {
    display: none;
    }

    #branding {
    border-color: #FFFFFF;
    }

    #branding img {
    height: 200px;
    margin-bottom: -7px;
    width: 100%;
    }

    #branding hgroup {
    margin: 0;
    }

    #site-title {
    margin: 0 0 -1em .5em;
    padding: 0;
    }

    .wf-active #site-title a {
    color: #69204F;
    font-size: 55px;
    font-weight: 400;
    }

    #site-description {
    color: #7A7A7A;
    float: right;
    font-size: 20px;
    margin: -1em .5em 1em 0;
    }

    .wf-active #site-description {
    font-size: 18px;
    }

    #access {
    background-image: none;
    box-shadow: none;
    }

    #access ul {
    font-size: 1.1em;
    }

    #access ul ul {
    top: 3em;
    box-shadow: inherit;
    }

    #access ul ul a {
    background: #ffffff;
    border-bottom: 0 dotted #DDDDDD;
    }

    #access div {
    margin: 0 0 0 .5em;
    }

    #access a {
    display: block;
    line-height: 3.333em;
    padding: 0 1.2125em 0 .9em;
    text-decoration: none;
    }

  13. Give this a try:

    Find "#access div" and change "margin: 0 0 0 .5em;" back to "margin: 0;"

    Then find "#access ul" and add this:

    margin-left: 0;

    What that will do is set both the container div for the main menu as well as the main menu list ("ul") flush left with the header image (which you can see if you look at those red and blue dashed lines in a live preview).

  14. Thanks

Topic Closed

This topic has been closed to new replies.

About this Topic