Develop Reference

Dynamic css multi column layout - update columns / force reflow?

TLDR: Can I force a column layout refresh after dynamically updating the 'css-column' css with javascript/jquery?
I have a navigation menu that I am using css columns for (I cannot work out how to use the Magento2 menu column functionality). I cannot really change the markup much. I want to stop 'widow' titles from happening (titles at the bottom of the column, with all the content on the next column - see 3rd pink title in screenshot below). It cannot be set with css as the nav items are dynamic and will change.
(I have tried "break-after:avoid" on the parent list, but this stops the list from breaking altogether - i.e. it should be able to break anywhere in the middle of the list).
I came up with a hacky solution that almost works - with javascript I am dynamically adding "break-before: column" to any list that has a widow title. (It checks the left offset of the title, compared with the offset of the first list child. If it is different then it means the title starts on the previous column).
This (sometimes) works BUT it (sometimes) does not update the columns until you resize the screen a bit.
I have been been trying out these kinds of solutions and many of these too. However none of them seem to work, for example I have tried:
console.log(elt.offsetHeight);
console.log(elt.getBoundingClientRect());
Tried 'elt' being all sorts, the parent elements, the whole body/doc wrapper etc. I thought maybe this was because the element in question is hidden until you hover over the nav link. But I forced it to be open using chrome devtools and ran the same 'reflow triggering' javascript and it still made no difference?
Is there a (preferably nice and not forcing reflow of the whole document every pageload??) way to force a recalculation of the css columns?
OR is a better solution possible using css grid / any other way?
Thanks!
In case it is relevant to another possible solution, the markup is like this:
<ul class="level0 submenu">
<li class="navigation_item__back hidden-desktop">
Back
</li>
<li class="navigation_item__link hidden-desktop">
Title
</li>
<li class="level1 nav-3-1 category-item first parent">
<a href="">
<span>Sub Title</span>
</a>
<ul class="level1 submenu">
<li class="navigation_item__back hidden-desktop">
Back
</li>
<li class="navigation_item__link hidden-desktop">
Sub Title
</li>
<li class="level2 nav-3-1-1 category-item first">
<a href="/">
<span>Lorem 1psum</span>
</a>
</li>
<li class="level2 nav-3-1-2 category-item">
<a href="/">
<span>Lorem 2psum</span>
</a>
</li>
</ul>
</li>
...
</ul>

Is it possible to place bootstrap button and dropdown in different place?

<div class="dropdown" style="position:fixed">
<span class="icon dropdown-toggle" data-toggle="dropdown"></span>
</div>
<ul class="dropdown-menu" style="position:abosolute">
<li id="1"></li>
<li id="2"></li>
</ul>
I need to do something like this. That is icon in one div(fixed) and ul outside the div(absolute position) to make scrollable in page ? If I give within the same div both taking fixed position and dropdown becomes un-scrollable This is not working. How can I achieve this ?

I think the only way to get this working is by creating a Button linked with your Dropdown menu. Almost like in this Bootstrap Example.

HTML Jquery .toggle not toggling back

<div class="row">
<div class="col one-whole">
<nav class="top-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Central Plumping</li>
<li>Roof</li>
<li>Drainage</li>
<li>Gallery</li>
<li>Contact</li>
<img src="img/title.png">
</ul>
</nav>
<nav class="burger-nav">
<ul>
<li><i class="fa fa-bars x3" aria-hidden="true"></i></li>
<li><img src="img/title.png"></li>
</ul>
</nav>
</div>
</div>
<div class="burger">
<div class="row menu">
<div class="col one-whole">
<ul>
<li>Home<i class="fa fa-times x3" aria-hidden="true"></i></li>
<li>About</li>
<li>Central Plumping</li>
<li>Roof</li>
<li>Drainage</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Hello all, currently trying to learn basic JQuery. I have managed to create a simple navigation bar, with responsive burger menu that hides and shows each navigation bar based on screen size. I then created a burger div that is 100% screen size fixed when displayed but is currently set it display:none. Now i have got my toggle working to display it, but when i try to close the menu bar, it doesn't seem to toggle back. Any help would be great thankyou.
My Jquery script is as follows:
<script>
$(document).ready(function(){
$("#toggleburger").click(function(){
$(".menu").toggle();
});
});
</script>

i guess your problem is that you're using an anchor tag with empty href attribute.
try chaging in
<i class="fa fa-times x3" aria-hidden="true"></i>
see example in this FIDDLE

I'm getting directed off when I click the element you're trying to tie the click event to.
Here's a working fiddle: https://jsfiddle.net/p85kazv0/
I've simply prevented the a element you're using from its default action (which is of course to direct someone to another location, dictated by whats in the href=""):
$("#toggleburger").click(function(e){
e.preventDefault();
$(".menu").toggle();
});

Reasons for unexpected behaviour:
<a> has href set to some other page. If you have to implement the menu or buttons that are only for in page activity you should set it as href="#". Meaning do not redirect me anywhere just perform the event linked with this action, which in your case is toggling of another div.
While e.preventDefault() is a workaround, it is not recommended here as the link is sitting there doing nothing. It would suit more if say you had a form that would submit itself but you wanted to do some processing/sanitation before submitting, thereby overriding default action with your logic.
There are two elements with id=toggleburger. Keep your id unique on one html page. This can give you a lot of pain while debugging.
Here is a working fiddle, I have replaced the hamburger image with text "ToggleBurger".

Set the href attribute of the <a> element equals to #:
<li><a href="#" id="toggleburger">

Highlighting menu section not active

I'm working on a project that requires 2 distinct menus, one on top, and one on the left of the page:
<div class="navigation">
<ul class="navigation">
<li>FILM </li>
<li>PHOTOGRAPHY </li>
<li>OTHER WORKS </li>
<li>INFO/INQUIRE </li>
</ul>
</div>
<div class="navigationLeft">
<ul class="navigationLeft">
<li><a href='../item1/index.html'><span>item 1</span></a></li>
<li><a href='../item2/index.html'><span>item 2</span></a></li>
<li><a href='../item3/index.html'><span>item 3</span></a></li>
<li><a href='../item4/index.html'><span>item 4</span></a></li>
</ul>
</div>
The left one is basically a sort of sub-menu of a section in the top menu. Originally, the project was meant to be small, so I used straight CSS to highlight selected sections using class, but the website has grown so much now that I want to use templating for future updates. That means that straight CSS is now out. I've implemented the following script in my header:
<script type="text/javascript" >
$(function() {
$(".navigationLeft a").each(function() {
if (this.href == window.location) {
$(this).css("color", "#ff9900");
};
});
});
</script>
It's working for my left menu, but obviously wouldn't work for my top menu, because technically the section that I'm in isn't the "current page". I'm looking for a way using jQuery/js to parse through the url and have the highlighting applied to any link that is once up the tree. So basically, in my top menu, any <a href> that contained for example /photography/ would also be highlighted, even though it's not technically the current page. Many thanks in advance!

Line up caret with link?

This works great for separating the caret from the link, making the link go to a page and the caret to trigger the drop-down. My only problem is making the caret line up with the link - it pulls right but drops below. How can I make it line up vertically with the link?
Here's the code:
<li class="dropdown">
SHOES
<span class="caret pull-right"></span>
<ul class="dropdown-menu">
<li>Boots and Booties
</li>
<li>Comfort
</li>
</ul>
</li>

Easy. Just move the caret inside <a> tag.
SHOES<span class="caret"></span>