A Song for a Navbar and Circular saw - or how to make it collapse on Tablet and down

To the point - there are many feeds around here complaining about navbar collapsing when a mobile device with is being reachred and staying as a ribbon upon tablet view. Personally I like it clean and tidy up there but I've seen a lot of projects with multiple top level links. For this kind of implements usually a device width around the 1000px barier gets crutual since past it there is not enough space for displaying all the links in the navbar. Actually this causes the navigation to expand further past the viewport creating a horizontal scroll bar and - of course breaking the responsiveness of the page - something we all try staying away from. Actually when it comes to German sites things might go bad a bit more rapidly since there seem to be a bit more symbols in a single word - meaning even 4 or 5 first level links are enough to spol the navbar. So what to do? (except complaining )

Actually since this is not a new situation I've crossed swards with it a few times now - figured some temporary sollutions like advising people to narrow the number of the first level links organizing them in dropdowns or actually utilizing a mini snippet for reduction of the free space between the nav links in order to fit them somehow until the menu collapse barrier is reached. These are of course temporary sollutions but they proved to be working enough to just patch the situation up

And today after talking with out fellow forum menber @dentaura last night I kind of got obsessed of finding a sollution to this one.

At firs I started exploring the default navigation bar appearance trying to restyle it in order to make it collapse a bit earlier. Did have some success but not enough to do the job to the end - I had some blurry memories it was quite a struggle when I was playing with the navbar control panel from the article trying to make it pop up from the right instead from the left as by default - this one appeared to be a tricky one too.

So I dropped this approach and tried making it the other way around - turned on the collapsed option and asked my self - how to make it collapse a bit later - for example at 1000px. It appeared the sollution is quite easy actually but (as the Heading maybe gave you a hint already ) far away from refined. Actually the approach that worked for me involves a small manipulation in the files generated by the Builder upon publishing but the manipulation is so easy and fast I think anybody who has eddited in text editor or Facebook can do it easily. And of course I would apprechiate any suggestion about refining my approach.

Anyway - it works. And hare is how I made it behave as suposed to:

Task: Make the element containing the navigation links and buttons display as a bar on viewport width at 1000px and highter and collapse when it gets under this point.

Tools needed:Mobirise Builder, Simple text Editor, Circular saw (for atmosphere only - omit it if you don't have one )

Sollution: First of all we'll need a Mobirise project and a Navbar. The settings for it are as fallows:

>

Logo and brand name are not important - a general friendly advice - insert the actual brand name in the field, hide it, and place an image containing both the logo and the brand name in the correct lockup positions youd design agency gave you - it gets more consistent this way. Buttons are also optional - I left them on in order to keep track how they will get displayed but omit them if they don't fir in.

The Important switch here is Collapsed - it should be on in order this one to work as suposed to.

This is coming a bit earlier but just in case you want to have your navbar initially transparent - you'll need an extra snippet - here it is:

Just place it in your navbar's custom CSS or in case you don't have The Code Editoer Extension - heve one in mind you'll need it a bit later.

So we've inserted our navbar element - now just add your content to it. If it's easier to you having it in it's usual appearance - temporary turn off the Collapsed option but make sure you turn it back on upon publish. Just do your site with Mobirise Builder as you use to do. When finished - publish to a local dir.

Comments

Now it's time for the Circular saw part - I call it this way because of the approach we're going to take in order to super simply alter the stylesheets of the project we've just published and obtain the navbar behavor we need. As I shared I think at lest a few times - this is a rough sollution, and I would be very happy if someone help me achieving a better one.Now - to work - navigate with your fike browser to the dir where you've just published your project and from there go to \assets\dropdown\css there you'll find a file called style.css - open it with your favorite text editor ( in case you don't have one yet - I recommend Notepad#, or just drag-drop the file inside open Notepad window ).

Now what you'll need to do is scroll down to the position specified in the image - don't worry - you can't miss it since there's only one phrase @media in the entire file On this row we need to change the number value which is 768px by default - at this width the menu will collapse in a mobile style - for the example I'm going to use 1000px - for most cases it works just fine.

Next - a few rows below you'll notice two } brackets in a row - remove one of them - leave only one standing

Almost done - now just scroll down to the end of the file add a few new lines and insert this snippet

at the place highlighted on the image.Note the 1000px value - it should match the one you entered above

The snippet marked as optional is the one from above - if you don't have Code Editor but need / want to use the initialy transparent appearance of the navbar - this is a good place for it.

Now all you need to do is save your file. Make sure it gets saved wiht it's initial extension - .cssThat's it! Your're done!Now all you need to do is go to your publish dir and doubleclick on any of your pages to view the result or in case you haven't closed the start page of your project the Builder automatically opens upon publishing your project - just refresh it. Here's how it looked like with me - I added a measuring ruler hopefully to make it more clear

Well basically this is it - do remember since this is a rough approach you should repeat this each time you publish your project locally and before uploading the files to your server.

Hopefully this will help - would very much like to hear your opinions about it.

Hi guys,As I shared above so far this is a bit orf a rough solution so as much as I was happy reaching it I also did not close the case - I just wanted to find a bit more refined solution. So here is what I thought of - instead of editing the stylesheet file each time when you publish it, why not just do it once and tell the pages to load what's needed from there instead from the old file which will actually get generated on and on each time when you publish your site locally. This will simplify the process a lot but still some initail efforts will at first be required...

I'm not proposing this as a final solution - it's rather the better temporary one.

So here is what I thied this time - I'll simplify it a little this time since the detailed explination remains above:

In order to start this clear I created a bran new site, inserted a few placeholder blocks and a Navbar element. In the Block Properties of the navbar I set it to be Collapsed.

Next thing I did is publishing it to a local dir - and accessing and editing the style.css file - same steps like in the first approach.

Here is where the differences start. This time I saved the stylesheet under a different name - not the most original or meaningful one but I just added 1 at the end of the name - so from style.css it became style1.css.

Next I uploaded the site to a temporary location on my server - this is for the example and in order you to be able to observe the site later on - in real life situation the best thing to do would be uploading on the actual location where you intend the site to take place - your server's main folder for example

Yep! It's there and gets read correctly - this is important since we're going to need it furter on so don't close this tab of your browser just yet - leave it as is for now.

Nest we'll tell the Builder to that from this point on we'll need not the style.css but style1.css instead. For this we're going to use a small custom snippet to paste in the End of body field in page's settings. And since what you add there doesn't get transformed upon publish - meaning if we define the path to the new stylesheet as a reference to a file on the disk (like: file:///d:/mobirise....) upon publishing it would keep this path as is and the file won't be included in the build folder and therefore - lost upon uplad. To handle this we've just uploaded the stylesheet needed to the server and now we'll just add a reference to it instead. The entire script you'll need is:

the so called ~actual path~ is the one from the tab loading the new stylesheet - remember I told you to leave it open - now just go and copy the address it points to and replace the string between the quotes with it. In my case it would look like:

Now all taht's left is accept changes and see what we've done. Do note since it's a script pasted in your custom html end of body field this won't show any difference in the way the menu looks in Builder - the change will however take place upon publish and preview. So if you want to style the way the menu will look at wider screens - in this example at 1000 px and up - just turn off the Collapsed option and arrange your things the way you need. Do remember to switch it back on upon publishing though in order to avoid surprising appearnaces.

as you can see it works quite as expected upon local preview which actually is publishing to a temporary folder and loading what's been published in browser. Now it's time to try publishing and overwriting what we already have on our server. Since the style1.css file won't be present in the build dir the whole procedure will pass arround it and it will remain safe in place. Hopefully Let's see.

Next I'll publish the project in a new folder - in the begining of the example the folder name was 5-s, now it will be 6-s - and upload to the initial place on server setting the Filezilla ftp client to overwrite everything wothout prompting.

And the result is:

as you can see it works as suposed to and the extra stylesheet remains untouched after reuploading the new build and the referenced.

So it have actually worked! Yeey!

This way finishes the story about my second attmpt to make the navbar collapse at a certain viewport width and expand in a regular inline set of links above it. But since I'm sure there will be at least one fellow forum member asking - can't this be done easier, without editing the css files, uploading and so on - here is what I thought of:

A quick and lazy sollution

Disclaimer: This approach utilizes third praty resource to work - it counts on a file hosted on my server in the directory of the sample web site I've created along with describing this example. As long as I'm concerned I'm not intending to remove it and nevertheless it's not very likely it is possible at certain point in time it might get temporary unavailable. Furtermore upon Mobirise Builder version eveolvement it is possible the entire structure of the vanbar element to get significantly changed which to result a bit different appearance from the one up to this date

Just wanted to explicitly let you know about it

After this being said - if you prefer instead of creating your own edited style - feel free to use the one I created for the example. And since it's LAZY sollution we're talking about - just paste this code in the "End of

As far as I know the most common appearance in tablet view is making it desktop and not tablet like (as described above). Personally I never had issued with that and find it much better looking with links on tbalet since the spece is besically more than enough. But this is just me - in certain cases I've seen duing the time spent over here it's not that incommon even for designer folks to decide their navigation element's structure with multiple or just too long first level links. I guess this especially counts for the German guys - no offence, but they seem to have a single words for what the other part of the world utilize one or two sentences So it's much understandable even a three links menu might occasionally get pushed past the viewport's bounderies.

So why did I do this workaround anyway - two reasons:

One - for all these guys who need it - as I shared above I have faced this in the forums a few times and didn't feel that good being unable to work it through - not that somebody required it or something

And Two - pure curioucity - I just don't like riddles I can't solve out. As far as I recall - resloving this one in rather simple and ordered manner worked fron the third attempt

Do I think this should be a permanent fix as you suggested - definately not. This way it will be just like now but the other way around - fixed - I don't like being constrained

I think if any steps should be taken at all the right thing to do would be making this option switchable or even better - adjustable - like the media slider recently introduced in the v.3.10.4 I think. I imagine it as a slider, just like the media size one giving the user the option of setting the viewport width at which the navbar to collapse - as simple as that. Or maybe a pure input box since it would be easier to enter precise numbers inside - with the slider might be a bit harder.

So that's why I said the answer is both yes and no - it would be a good thing to have it but definetely not a matter of first importance according to my humble opinion - still quite glad I managed to figure it out

as you can see it kind of works My friendly suggestion to you is this - try it out one thing at a time:

replace the default style .css file with it to see if it will work - file generated with M3 theme;Place the file on server and try replacing it with the jquery script - meaning place the script in your page's end of body and preview. Observer the code - the link should be replaced in the head. If not:

See if you have jquery library included - generally the builder includes it by default;Observe your debugger's tool error messages - maybe you;ve made a slignt mistake in the script - happens to me from time to time.

Once you've seen it working - try reflecting the changes to your own stle.css file, duplicating it and so on. Do note when defining the breakpoints we actually expand the media query - deleting a } bracket and adding it just at the end - this counts, so pls make sure you've got everything included in it.

Pls feel free to upload what you've done so far to a temporary location and share the link - I'll be glad to take a look and try helping you figuring out what is this tiny thing preventing it from working as supposed to

And one mor thing - thanks for helping me testing this one out - it's very probable other users to experience fallbacks similar to the ones you're having - this way we'llbe able to find and point them out so the next users to be aware of them - so thenks a lot!

@filyov. i have added it in css editor of menu block. but menu below 1000px disappears. can u pls check. i need to add code in css editor of menu block so that will be a permanent one. If we add in the css file, each time i export i will have to add.

Hi @dentaura ,I took a look at your sample site this morning - was a few days away so just sow this message. Not 100% sure but I think I know what the issue is. You see - this approach works like this: You first hide the navbar element into a collapsed state via the block's Properties panel to make sure it displays collapsed at all screen widths and just then you reveal it for the desired width and over by manually editing the style.css file. Pls kindly take a look at the beginning of the thread - it says - The collapsed switch should be turned on. So my suggestions are these - you could either:

Remove all the customization you have applied to the navbar so on and publish to a noew dir. Make sure the Collapsed witch is being turned on so the navbar displays collapsed at all screen widths. Publish once more to the same folder. As you quite well know the pages which have been just published will display inside your browser in a new tab. Do not remove it - leave it open now for just a bit since you will need it in a few steps from now

Now enter the style.css file located inside the assets/ dropdown/ css/ folder and alter it according to the very first post above. Save the style.css file and head back to the browser tab displaying the the pages you have just published.

Refresh the page. You should see the navbar collapsing at the desired width. Actually I just did this to make sure it all still works and it did - here is the result:

to the left inside the Notepad# I collapsed all the rules leaving just the query open so you can see both snippets and the responsive view with the viewport dimensions at one place.

A thing to note - in this approach there is a snippet to add almost at the bottom of the file before saving it. The value there - 1000px in the example should be the same as the one you've put in the beginning of the file - these should be one and the same - like if you want to have the navbar collapsing let's say at 950px instead of 1000px you should place 950px in both the beginning of the file and inside the snippet you add at the bottom - same value.

When you do it this way it will work for the current published build but will still return to previous behavior once you preview or publish through Builder which is not the best behavior for a work in progress. What the Builder will actually do is rewriting the file we've just edited so all the changes get lost. That's why we can use the approach from the next long post - place the edited file somewhere else where we can access it - like on the permanent location on our servers or whatever - and use a small script to replace the link referencing the old dropdown stylesheet with the edited one placed inside page's end of body section (needed for each page inside your project). So what it actually does is replacing the link each time the page gets rendered so the browser reads from the correct one.And finally - the quick and lazy solution - I still keep a copy of the edited stylesheet on my server so if the 1000px is the break point you're after - first just paste the very last snippet from the second long post inside page's body and preview the page - I just did and it collapsed properly. Next - download the file, place it on your server and alter it properly

So it still works, buddy Just calmly take a look once more if you have missed out something or maybe mixed up the approaches. You asked for looking over and I gave you a tons of words in return but as you can see it requires messing up in a few places so just looking at the page's code I might mislead you but here is what I can see - the style css file is not edited and there is no script at the end of the body tag so I suppose you also might have uploaded a different build. Pls take a look and let me know what heppned next

i tried all ways of codes. and unable to eliminate the background. i guess it is in some other css file. so i added important to it too and tried. still it doesnt get removed.

Filyov. there is no way to handle the codes by using the code editor in the menu block without unlocking. because. if we are editing the exported code. each time i publish that need to be changed and uploaded. if we do a change in code editor and that will be a one time procedure

Hi @support do u have a solution for this or are u going to provide a collapse for menu in tab view too. i guess that is required for mobirise 3 theme as many people are having menu in tab view going out of view below 1000px. Otherwise u need to keep the size of menu font too small and it will be difficult to read.

Hi @indigoclubsuThe snippets were developed with the M3 theme initially, can't seem to fund a reason why this exact one shouldn't be working on any though.Will take a look at the sample link you've provided and write back with some impressions Cheers!