byandreavaldes Posted November 3, 2023 Share Posted November 3, 2023 (edited) Hi guys! I would like to custom my current navigation bar that looks like this: I appreciate your help. Thanks in avance. Edited February 22 by byandreavaldes Link to comment
SaranyaDesigns Posted November 3, 2023 Share Posted November 3, 2023 @byandreavaldes Does your mobile site already have the burger menu, you might be able to repurpose that with some CSS... can you share a link to your site so we can have a look? Link to comment
byandreavaldes Posted November 7, 2023 Author Share Posted November 7, 2023 Hi Saranya. Thanks for your reply. You can see it here: www.byandreavaldes/about The issues I'm facing are: 1. Desktop version: menu options do not appear 2. Mobile: The menu has been divided in half as programmed in the code, however I'd like the burger menu to be full screen in the mobile version. Do you know what I might be doing wrong? Here's the code I used: .header-nav, .header-actions { display: none; } .header-burger { display: flex; } .header--menu-open .header-menu { visibility: visible; opacity: 1; } .burger-box { width: 24px; } .header-menu { min-width: 50%; max-width: 35%; width: 100%; } Link to comment
SaranyaDesigns Posted November 7, 2023 Share Posted November 7, 2023 @byandreavaldes ok yeah this template is complicated. It looks like there is some javascript at work here... for one, it's auto-adding some padding to the header based on screensize which is why the menu doesn't appear in desktop, so you need to override that, something like: .header--menu-open .header-menu { padding-top: 80px !important; } ...but then the menu is all rotated... I played around with trying to un-rotate it, but it becomes very complicated and layered very quickly... Regarding making the mobile menu full width, you can add this as well: .site-wrapper .header-menu .header-menu-bg { width: 100vw; } But the expandable services submenu is still displayed at all times, which I assume is not what you want? I looked for some of the CSS you've already added, but some of it looks like it's not being picked up, so you may need to check your selectors? Overall I would probably recommend hunting around for a theme/template that starts with a burger menu in desktop mode, as you may be trying to fit a square peg in a round hole with this particular one given how it's built. I think it will require some heftier custom coding, as it seems a lot to overcome with just CSS... sorry! 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