How to move menu bar below header in Chateau Theme?

  • Unknown's avatar
    metallfx · Member ·

    Hi, I’m trying to move the menu bar for my site (coldmetalspray.com) below the header image so that it doesn’t get lost when people scroll down the page.

    Can anyone help with the CSS code to do this?

    I have tried the following, suggested in a post about moving the menu above the header in the twentyten theme but it didn’t work (I changed top to bottom);

    #access {
    position: absolute;
    bottom: 0;
    }

    #branding img {
    margin-top: 43px;
    }

    The blog I need help with is: (visible only to logged in users)

  • jeherve · Staff ·

    You could try something like this:


    #main-image {
    position: absolute;
    top: 0;
    }

    #menu {
    position: absolute;
    top: 280px;
    }

    I have not had time to test it, since you seem to have switch themes in the meantime.
    let me know if that works!

  • Unknown's avatar
    metallfx · Member ·

    Thank you Jeherve, that CSS code worked a treat!!

    #menu {
    position: absolute;
    top: 280px;
    }

    Sorry about changing themes, I wasn’t having much luck with the CSS so was trying other themes with the menu at the bottom.

    Perhaps you could help with with another problem I seem to have with my menu?

    When on the home page, several items in my custom menu are highlighted/bold as they should only be when on that actual page. I’ve realised that it only happens on menu headings that have sub-headings.

    Also when you click on a sub-heading, that heading then becomes red rather then the dark grey colour.

    Any ideas?

  • jeherve · Staff ·

    Try this:

    #menu .menu-item > a {
    border-bottom-color: #CCCCCC;
    border-top-color: #DDDDDD;
    color: #3E3D3D;
    font-weight: bold;
    }

    Hope that solves your problem.

  • jeherve · Staff ·

    About the red menu item, I assume you want it to be grey instead?

    Try adding this to your custom CSS:

    #menu .current-menu-ancestor > a {
    color: #3E3D3D !important;
    }

    It should help.

  • Unknown's avatar
    metallfx · Member ·

    Thanks Jeherve, I tried that code, but it now makes everything bold, not just the the heading/page that you’re currently on.

    At least it is consistent but it would be nice if it only bolded the active page.

    It also eliminated the red menu items without adding your extra code.

  • jeherve · Staff ·

    I am sorry metallfx, but I don’t see any easy solution to solve that problem. I will look it up and come back to you on that later if I find a solution.

    In the meantime, maybe somebody will have the solution! :)

  • The topic ‘How to move menu bar below header in Chateau Theme?’ is closed to new replies.