Hamburger Menu

NJPADA
(@njpada)

2 years, 6 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 ww.wp.xz.cn 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 2 years, 6 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)

Moderator threadi
(@threadi)

2 years, 6 months ago
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)

2 years, 6 months ago
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 2 years, 6 months ago by James Huff.
- This reply was modified 2 years, 6 months ago by James Huff. Reason: fixed formatting
- This reply was modified 2 years, 6 months ago by James Huff. Reason: redundant link removed
Moderator threadi
(@threadi)

2 years, 6 months ago
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