Align desktop burger menu itens to the top

Site URL: https://importcarfactory.com

Hi.

Need CSS code to align my desktop burger menu items to the top as you can see in the mobile mode.

Thanks,

MC

I worked exactly as I needed!

Gratitude Tuanphan 

Another question for you:

What is the code to make the desktop burger menu the same width of the mobile so that the rest of the page can be seen in desktop mode?

Thanks again! 

MC

5 hours ago, cruz said:

Another question for you:

What is the code to make the desktop burger menu the same width of the mobile so that the rest of the page can be seen in desktop mode?

Thanks again! 

MC

I see desktop burger is already 100% width

I know, but I want it to be the same width as the mobile thus occupying 30% of the desktop width.

To adjust width on desktop, use this CSS code

@media screen and (min-width:768px) {
div.header-menu {
    width: 30%;
}
}

Thanks!

On 10/16/2024 at 5:54 AM, cruz said:

Site URL: https://importcarfactory.com/

Hi.

Need CSS code to align my desktop burger menu items to the top as you can see in the mobile mode.

Thanks,

MC

To align the items in your desktop burger menu to the top using CSS, you can apply some styling to the menu's container. Here’s a general approach you can take. You might need to adjust the selectors based on your specific HTML structure:

Implementation Steps:

1. Inspect the Elements: Use your browser’s developer tools (right-click the menu and select "Inspect") to find the class names of the burger menu and its items. Adjust .burger-menu and .burger-menu-item in the code above to match your actual classes.

2. Add the CSS: Place the CSS code in your website’s stylesheet. If you have a custom CSS section in your theme settings, you can add it there.

3. Test Responsiveness: Check the menu on both desktop and mobile views to ensure it looks as intended.

Additional Tips:

• If your menu is hidden initially and only displayed on click, ensure that the absolute positioning doesn’t interfere with other page elements.
• You might need to use media queries if you want different styles for desktop and mobile versions.

Thank you so much for your insights Jack!