cruz Posted October 16 Share Posted October 16 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 Link to comment
Solution tuanphan Posted October 16 Solution Share Posted October 16 You can use this to Website Tools > Custom CSS .header-menu-nav-folder-content { justify-content: flex-start !important; } cruz 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
cruz Posted October 16 Author Share Posted October 16 I worked exactly as I needed! Gratitude Tuanphan Link to comment
cruz Posted October 16 Author Share Posted October 16 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 Link to comment
tuanphan Posted Wednesday at 11:31 PM Share Posted Wednesday at 11:31 PM 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
cruz Posted Thursday at 12:16 AM Author Share Posted Thursday at 12:16 AM I know, but I want it to be the same width as the mobile thus occupying 30% of the desktop width. Link to comment
tuanphan Posted Thursday at 03:21 AM Share Posted Thursday at 03:21 AM To adjust width on desktop, use this CSS code @media screen and (min-width:768px) { div.header-menu { width: 30%; } } cruz 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
jack_henry Posted Friday at 03:14 PM Share Posted Friday at 03:14 PM 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: /* Target the burger menu container */ .burger-menu { display: flex; /* Use flexbox for layout */ flex-direction: column; /* Stack items vertically */ align-items: flex-start; /* Align items to the start (top) */ position: absolute; /* Allow positioning without affecting layout */ top: 0; /* Align to the top */ left: 0; /* Adjust left if necessary */ } /* Target individual menu items */ .burger-menu-item { margin: 0; /* Remove any default margin */ padding: 10px 20px; /* Adjust padding as needed */ } Implementation Steps: 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. 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. 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. cruz 1 Link to comment
cruz Posted Friday at 03:43 PM Author Share Posted Friday at 03:43 PM Thank you so much for your insights Jack! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment