How can I put the menu drop down to the top right when on mobile?

  • Unknown's avatar
    tatin05 · Member ·

    Hello, I am using Independent Publisher 2 Theme and I would like to ask some help on how can I move the menu drop down to the top right when on mobile.

    I would also like to ask on can I keep the dropdown menu on top right even if I am scrolling down the page through mobile or web.

    Thank you so much for your help. It is much appreciated.

    Blessings!

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

  • Unknown's avatar
    helper-leigh · Member ·

    Hi tatin05,

    I’m looking at your site and the Independent Publisher 2 theme to see if there’s an option to put a drop-down menu in the top-right hand corner.

    It looks like this theme offers the main menu option, which is just under the header. Or, you can add a menu with a widget, but the widget locations are either a sidebar or 3 footer areas.

    If you upgrade to Premium or Business plan, there are more options to customize CSS, and that might work for this (I’m not sure if this theme supports that, though).

    I’m going to tag this with “modlook” so a member of the Staff can look at your question, also. They may have other ideas on how to do this without upgrading your plan.

    Hope that helps a little!

  • staff-zinnia · Staff ·

    It’d be best to use a theme that has this menu functionality built in to it versus adding CSS to do so.

    It’s probably possible to do with CSS, I’d need to take a closer look. My advice is to not upgrade to Premium just for 1 CSS need.

    Here are a few free examples that have a menu location more suited to your request:

    1. https://wordpress.com/theme/altofocus

    2. https://wordpress.com/theme/intergalactic-2

    3. https://wordpress.com/theme/rebalance

    4. https://wordpress.com/theme/twentysixteen

  • staff-zinnia · Staff ·

    If you let me know which device you are using I can use the browser inspector to see how these menus would appear for you.

  • Unknown's avatar
    tatin05 · Member ·

    Hi! Thanks for the quick revert. If you will view the site using mobile browser, the regular menu (which is under the header) will become a menu drop down and will show up in the middle of header image.

    I am already subscribed to premium. :)

    I would like to keep the menu drop down visible even if I scroll down to the bottom of the page or go to another page if possible.

    Thank you :)

  • staff-zinnia · Staff ·

    The menu should definitely not appear in front of your header image. That sounds funky. Could you add a screen shot of what you’re seeing to your media library. I can take a look from there.

    Also, which device and browser type are you using when you see that menu issue?

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @tatin05, I took a look and tested Independent Publisher 2 with a header image, and it appears like the menus (main and social, if you are using it) do overlay the header image by design. What you can do is to change the color of it so that it isn’t lost on your lighter colored image with the following custom CSS. I’ve used the red color you are using for other elements on your page in this example. 

    .has-header-image #hero-header:before {
 background:linear-gradient(rgba(0,0,0,0) 50%,rgba(0,0,0,0))
}
.has-header-image .menu-toggle {
  color: #ff0000;
  border-color: #ff0000
}

    We can set the menu toggle to a fixed position so that it always appears as you scroll down on tablet and mobile, but it will end up overlaying your content and making reading more difficult for your visitors.

  • Unknown's avatar
    tatin05 · Member ·

    Thanks, sacred path! :) I used your code and it made the menu toggle visible. Is there a way where I can put it under the header image or on top of it?

    thanks again!

  • Unknown's avatar
    thesacredpath · Member ·

    We can move it below the image reasonably easy with the following. 

    @media screen and (max-width: 517px) {
  .has-header-image .menu-toggle {
    position: relative;
    top: 165px;
  }
  .has-header-image .content-wrapper {
    padding-top: 4.5em
  }
}
  • Unknown's avatar
    tatin05 · Member ·

    Hi, The sacred path! Thanks :) It worke However, when I clicked on the menu, the dropdown didnt appear below it, it is in the same position as before and it appears behind the menu.

    Sorry, I am really new with css :((

  • Unknown's avatar
    thesacredpath · Member ·

    Oops, didn’t notice that. Instead of the above, use the following, which will space the menu down a bit when opened so that there isn’t any overlap. 

    @media screen and (max-width: 517px) {
  .has-header-image .menu-toggle {
    position: relative;
    top: 165px;
  }
  .has-header-image .content-wrapper {
    padding-top: 4.5em
  }
  .main-navigation.toggled {
    padding-top: 70px
  }
}
  • Unknown's avatar
    tatin05 · Member ·

    Thank you so much for helping me out :) It looks great now :)

  • Unknown's avatar
    siobhyb · Member ·

    I’m glad to hear that! :) You know where to find us if anything else comes up too.

  • The topic ‘How can I put the menu drop down to the top right when on mobile?’ is closed to new replies.