While working on a new site for a client who wanted the Vertical Navigation Header Format, I decided that the width needed to be increased. After a little scratching I got it right with the CSS below.
As you make your side menu wider your logo will grow with it.
UPDATE: If you have issues with the text of the menu wrapping, use pixels rather than a percentage and then manage it with a media query so that it doesn’t mess you around on different screen sizes. If you need help with media queries, check out Media Queries Demystified by emailonacid.com.
Not sure why this tutorial uses absolute units like px. I would have opted for either % or vw/vh to maintain responsive behavior.
Good point, I’ve updated it.
I like the website that is shown on the screen on the image in this post. Do you have its URL?
Hi Andre, the site is still “under construction”. The site is done but the client isn’t ready to launch it. I’ll let you know when it’s live.
Thank you! This worked perfect for me.
doesnt work if the page has very little content, it cuts off the menu
Is your footer at the bottom of the page or just below the content?
at the bottom.
divi uses js to decide the height of the left hand nav (non fixed navigation bar).
it does this using data-height-onload=”525″ data-height-loaded=”true” data-fixed-height-onload=”826″ on the #main-header then js sets an inline style of the “data-fixed-height-onload”
putting in any custom widths stops the script working and the height doesn’t get applied.
ive never been able to fix this 🙁
Thank You Thank You Thank You
Thank you! This worked perfect for me.
When I do this my text is behind the menu… I’ve got a boxed version..
Hi Bertus,
Can you post a link to the site?
Cheers
Hey, this is great, but when I do it, it cuts into the rest of the page. The menu overlaps the page instead of pushing it over. Any ideas?
HA! I figured out the problem! I had my menu on the right, I had to change the margin to the right instead. Sorry!
I thank you for this solutionWhere exactly do you put this CSS?
Hi John,
If you have a child theme put it in the style.css file otherwise, go to Divi > Theme Options > General, scroll to the bottom of the page and insert it into the field called Custom CSS.
Hi,
I would like to shrink the vertical nav bar but keep the logo the same, do you know how you can stop it from shrinking?
Cheers