Vertical Header in Elementor With Side Bar Navigation - [Flexbox Container] In 2024
HTML-код
- Опубликовано: 2 июн 2024
- Vertical Header in Elementor: In this Elementor tutorial video, our team unveils a step-by-step guide to crafting an eye-catching vertical sidebar header using the latest Flexbox container techniques. Watch as we demonstrate the process of designing a vertical header that adds a touch of elegance and functionality to your website.
Learn how to seamlessly integrate an Elementor sidebar menu that automatically highlights as you scroll through the pages. Discover the trick to slimming down the header with just an icon for a sleek and modern look. Our responsive design ensures that this sidebar header looks fantastic on various devices, from tablets to mobile phones.
00:00 Intro
01:30 Creating Header In Elementor
03:00 Adding Header Elements
07:00 Styling Sidebar Toggle
12:00 Styling logo - Vertical Header Elementor
13:00 Mobile styling - Vertical Header Elementor
Code: websensepro.com/blog/create-a...
Hire Us On Fiverr For Customisation/Designing in WordPress/Elementor: www.fiverr.com/s/87Q2D4
👉 👉 👉 If you want help with Elementor Customization, WordPress Design and Development, Store development, or any other web development help. Contact us via websensepro.com/contact-us 
Наука
Hire Us On Fiverr For Customisation/Designing in WordPress/Elementor: www.fiverr.com/s/87Q2D4
Waiting for it.. Hope to learn something new today.
Thanks
Thanks a lot! Kudos
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
hey guys and thank you. i have an issue: how to make the page contents centered dynamically width this sidebar-header? the main content actually will lay behind the menu. when i give the content a margin or padding, it will look stupid when the sidebar is minimized.
What to do?
Not clear about your issue, contact us for paid support if you want us to fix issue on your behalf
Hey can someone share the code that helps in reducing the content on screen when the header is opened (for desktop and tablet).
Contact for support, link in description
I am trying to add JavaScript code, but the option is not showing to add. Kindly Help me
Whats the error?
Use html widget and dont forget to add on beginnig of code and in the end .
what if implemented in elementor free?
i dont have elementor pro, please make a tutorial for elementor free
Sure, please subscribe so we can create tutorial for free version
@@WebSensePro welldone
please make for Elementor free also
how about dropdown menu?
What about it? Is it not working for you?
Have you already solved it? It doesn't work for me either.
good and very good but it hide the content on the pages .. for mobile it is fine but it show problem on pc and on tablet.. just guide us please.
A little CSS tweaks will be able to help you
I fix it by replace some code: In the main container css replace this: var(--width) for 250px and var(--narrow-width) for 80px. This is because elementor doen't accept css variables. I Leave this comment here for someone that need this fix like me 😆 and Thanks you @WebSensePro for this wonderfull tutorial.
@@BrahyamMosqueraThanks for contributing
@@WebSensePro Really appreciate this! Did you update the code on the site with this fix already or we have to fix it ourselves? Thank you
@@WebSensePro Hey
Plz help me.
I designed a header but then i create a page the page content is dissappear in the header. How i can decrease the with of the pages that the content are not understand the header. Plz help
Thank You
Hello, the Sideboard Toggle dosent work… i Need help
Sure, please contact via websensepro.com/contact-us for paid support
Have you already solved it? It doesn't work for me either.
the code for toggle icon is not working
Contact for support, link in description
was this solved? the code doesnt work for me either
it needs plugins
Meaning?
why she is talking like that??
Because thats how she talk 🤣🤣
Why a yu gai?
And worst of all... Indian.