WordPress.org

Ready to get started?Download WordPress

Forums

Buttercream
[closed] Move Mobile Nav Bar to Top (10 posts)

  1. clintonjacob
    Member
    Posted 1 year ago #

    I have successfully moved the navigation bar to the top of the page for desktop browsers, but I want to do the same for the mobile version of my site. Is this possible?

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you provide a link to your website with the issue?

  3. clintonjacob
    Member
    Posted 1 year ago #

    The business hasn't launched yet, so I'm trying to keep it on the DL. Basically, if you load any close-to-stock version of this buttercream theme on a mobile device such as an iPhone you will see what I mean. I currently has the nave menu on the bottom of the page. I would like to move it to the top, or explore ways to manipulate it.

  4. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    Media queries are used for the mobile version of the theme -- these are located at the end of style.css under a Media Queries header (look for @media only screen and (min-width: 1024px ))

    Try putting the same code you used to move the nav bar on a desktop version to the media queries section, within the extra brackets for min- and max-width values. You may need to play around with it a bit.

  5. clintonjacob
    Member
    Posted 1 year ago #

    Thank you Caroline. Do you have an example of where in the mobile detection section the nav bar location is defined? I'm looking at the CSS, but the only thing that hints at a position is:

    .navbar {
    border-top: 2px solid #422619;
    position: fixed;

    Is this what I need to change for all of the resolutions?

  6. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    I haven't tried it myself, so I don't know for sure, but yes, you'd probably target the .navbar class.

  7. clintonjacob
    Member
    Posted 1 year ago #

    OK, so I actually just copied and pasted the above code into the mobile section that covers 320px and 480px wide pages and it worked. It fixed the menu to the top of the mobile page. Looks great as long as you keep your page to 1-2 pages.

    Now that I have done this I need to shift the entire page down, starting with the header banner image (cupcake and ribbon banner). Where is this specified? How do I move the whole page down?

  8. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    You can use CSS to do this (we don't offer CSS support on this forum, but there are a number of resources linked there). You'd probably want to position the .page div a fixed distance from the top, to accomodate the size of the navigation menu. I recommend using Firebug for CSS work like this--makes it much easier.

  9. paulpablito
    Member
    Posted 1 year ago #

    Hi,
    I love this theme. I have a little question (I tried to find in the blog without success): I moved the navbar to the top but when I go over a menu, the pop-up with the sub menu goes "up", out of the page. It's possible to set the sub-menu on the navbar to open down and don't up.
    Thank you in advance and sorry for my poor english.
    Paolo.

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    Paulpablito, stick to one thread on the issue.
    http://wordpress.org/support/topic/buttercream-theme?replies=1

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.