Hamburger Menu

  • NJPADA

    (@njpada)


    11 months ago

    I’m basically a novice at WordPress but have blundered my way through (mostly by trial and error) to create a website for a service group: The hamburger menu (NAV menu?) in both desktop mode and mobile phone mode is on the right side of the screen. However, when one clicks on the menu, the pop-up menu (or drop-down menu?) appears on the left side of the screen. How can I make the menu drop down on the right side of the screen? I’m using www.ads-software.com theme Twenty Twenty-One. Is there a setting under Appearance/Customize/Nav options that will move the menu to the right? Or can someone suggest some simple CSS code that will do the trick?

    • This topic was modified 11 months ago by James Huff. Reason: redundant link removed

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • threadi

    (@threadi)

    Add this in Appeareance > Customizer > Additional CSS:

    .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { right: 0;left: auto; }
    Thread Starter NJPADA

    (@njpada)

    I really appreciate your help. As instructed, I put the following code you suggested into Themes/Customize/Additional CSS:

    .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { right: 0;left: auto; }

    It appears to work on both desktop and mobile devices.
    However, on the deskstop, the position of the hamburger menu changes from where is is when one lands on a page to a new position as one scrolls down the page. The dropdown menu color block changes as well: a white border appears around the dropdown menu. If you go to the website, you can see what I mean.

    Also, I’d like to make the dropdown menu narrower on the desktop and wider on the mobile device. Is that possible?


    The following is in Appearance/Custom CSS. it’s probably something i copied from wome website when i was first trying to set up the website a few years ago. i have no idea if it is relavant or if this is what is causing my problems.

    .primary-menu-container {
    display: block;
    width: 40%;
    height: 10%;
    }
    .table,tr,td {
    border: none;
    border-collapse: collapse;
    width: fit-content;
    margin-left:0;
    padding: 0;
    }
    .nav {
    position:relative;
    top:0;
    }
    .ast-header-break-point .main-header-bar {
    width: 40%;
    float: right;
    }
    .hide-section {
    display: none;
    }
    Again, thank you for your knowledge and assistance. It’s vey much appreciated.

    • This reply was modified 11 months ago by James Huff.
    • This reply was modified 11 months ago by James Huff. Reason: fixed formatting
    • This reply was modified 11 months ago by James Huff. Reason: redundant link removed
    threadi

    (@threadi)

    I see. Add this in the customizer:

    @media only screen and (min-width: 482px) {
  .primary-navigation .primary-menu-container > ul > .menu-item {
    margin: 0;
    padding: 0 0 0 12px;
  }
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Hamburger Menu’ is closed to new replies.

Tags