WordPress.org

Ready to get started?Download WordPress

Forums

Highwind
move menu (10 posts)

  1. mtwtokyo
    Member
    Posted 10 months ago #

    How can I move the menu down to the bottom of the header, and not the top? http://www.iversonjapan.com

    (any chance it can be done in css?)

    Thanks!

  2. jameskoster
    Member
    Theme Author

    Posted 10 months ago #

    Hey, you should be able to do this with CSS yeah.

    Something like;

    @media only screen and (min-width: 769px) {
    .main-nav {
    postition:absolute;
    top:300px;
    }
    }

    Just adjust the top value to suit.

    Thanks

  3. ed88
    Member
    Posted 9 months ago #

    I am trying to do the same as the original poster (move the menu to below the header).

    I have inserted the above code into my child style.css (correcting for the misspelling of position), however when I adjust the 'top' value the menu bar moves down about 1cm on the screen but no further (regardless of what px value I insert).

    Any help would be greatly appreciated :)

    The website url is: http://www.aspectpacific.com.au/WPTEST/

  4. designbyjesseR
    Member
    Posted 9 months ago #

    ed88 I did these adjustments and it looked fine remember to try these to your child theme:

    .main-nav {
    top: 312px;
    }

    .csstransforms3d.csstransitions .show-nav .main-nav {
    transform: translate3d(-100%, -312px, 0px);
    }

    the first one is for non responsive part and the second one is for responsive add these to your child theme and see how it works out for you! :-)

  5. ed88
    Member
    Posted 9 months ago #

    Thanks for the reply designbyjesseR. However I get no luck when adding the above code to my child theme. The menu bar doesn't move at all. The only other thing I can think of that might be affecting it is my header. To widen my header I have added the following to my child theme.

    .header {
    height: 150px;
    }

    Would this be affecting it?

  6. AJD
    Member
    Posted 7 months ago #

    Thanks this worked great for me!

    note: I had to add a selector, .admin-bar, because that's the way it is called in the parent theme... or use !important.

    @media only screen and (min-width: 769px) {
    .admin-bar .main-nav {
    postition:absolute;
    top:300px;
    }/*Move the main nav menu below the header. Non-responsive only */
    }
  7. JonBquist
    Member
    Posted 6 months ago #

    Is anybody still having an issue with this? I used the code AJD supplied, with an adjustment to top:500px;
    The location of the menu is perfect upon initial fixed sight. However, it hovers as I scroll down the page, in the middle of the page, blocking all text/pictures/etc.
    How do I keep the menu fixed - starting below the header (which I have completed) - and then fixed at the top of the page as the reader scrolls to the bottom? Any help is appreciated

  8. esmi
    Forum Moderator
    Posted 6 months ago #

    @JonBquist: If you require assistance then, as per the Forum Welcome, please post your own topic.

    This topic references an old version of WordPress.

  9. AJD
    Member
    Posted 6 months ago #

    I typo-ed 'position' in my code snippet. That would probably be the issue, it needs to be: position:absolute

    Your menu is still: position:fixed, but 500px down from the top of the screen.

  10. JonBquist
    Member
    Posted 6 months ago #

    Perfect - thanks AJD

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.