The menu is responsive, just meant for less primary navigation items and is being set to collapse at horizontal width of 768px pr less.

But at certain cases in the projects we create we decide to have more links and eventually at a certain viewport width the navbar remains expanded BUT the links with the free space assigned around them take more then the width of the screen causing the navbar to flow over the right boundary of the screen.

So what to do (except getting frustrated I mean) ? We have discussed this quite a few times - here is I think the most recent discussion about it along with the links to the diferent approaches you could take to handle the situation

But I think we can all thank @Seraph since this is a bit new case here - the third level nav links flowing outside the viewport. @Seraph I think this will help you handle the situation

.dropdown:last-child .dropdown-submenu {
left:-100%;
}

this will tell the submenu getting out of the screen will display on the other side of its parent element meaning it will remain entirely in the viewport - something like this

Additionally you can try it out without the last child pseudo selector like this

.dropdown .dropdown-submenu {
left:-100%;
}

which will apply the rule to all the third level sub menus - not just the last one.

Btw are you really sure you need your navigation that complicated? I think maybe it would be a good idea if you gather some friends or colleges and ask them to test browse the pages as they are now just for you to receive some real humans feedback how they find the ease of navigating through your future web site. Personally I think you showld consider simplifying it a bit but hey - that's just me

Anyway - I hope this helps - pls make sure you write back what happened next

I've had a read through your work regarding the issue and you have provided great advice on how to overcome this. It's such a frustrating thing to see the menu you have created disappear off the edge of the screen due do the font sizes not fitting on all devices screens.

The menu in sites created with Mobirise definitely need break points adding so it collapses earlier with different screen sizes so we can all make our menu fonts bigger, even if it's just for a website with 6 pages for example. It just seems like an impossible task to add css to every menu page in a website created and then keep it updated if creating multiple sites for clients.

I tested it on one page in the menu block on the home page and it worked - but it did not update to the menu on all the other pages. Version 3.12 which still seems buggy with error messages after saving pages.

Hi Mack,You're actually right! Thanks for pointing this one out. Here is a thing - the navbar remains as universal element in all the pages of the build BUT it takes place as a separate section with a separate ID on each page. And since as we well know the Custom stiling rules get included in the mbr-additional.css with the section ID preceeding them we actually end up with separate styling for our navbars over the pages or our projects

This isn't neccessarily a bad thing though since it gives us an easy way having slightly diferent navbars on each page according to its specific content by just hiding the unneccessary links with some CSS but on the other hand stands in the way when we need a general styling spreading all over the place. So - what to do?

I think the best approach here would be complsong our styling script in the Custom CSS field for one page (keeping an eye over the results diresctly in Builder upon each change - fas and easy as we got used to ) and then just wrapping the rules we have settled for into a <style>tag and place it inside the head field. This way the rules will be applied globally and since the navbar elements are mostly using navbar specific classes we can rest calm the global styling will not affect the other sections of our project. Even if eventually such thing gets noticed - the rule messing up can be slightly altered to make the selection a bit more precise

Or of course - we can just compose a snip, make sure it is the rught one after doing all the things which could possibly mess up to it and see it standing up and just then spreading it all over the pages of the project

Btw I noticed a slight fail in the script from above - when reaching the target widths the tiny triangle pointing out there are some submenu items gets displaced - I guess I've missed up this one earlier. SO in case you have submenus in your navigation I suppose you might want to also include this rule in the media query

.nav-dropdown .link.dropdown-toggle::after {
right: -0.5em;
}

Regarding the images you shared being reported missing upon exporting the project - recently we had this strange issue with the file extension being written uppercase or lowercase defining the way Builder handles the files - remember?

Is it possible this is the reason you have it crying out loud and eventually frustrating you upon each publish?

And one more thought - why don't you look up the names of the files being reported missing in the mobirise.project file? Maybe this will give you some tips..

And lastly (but not in importance ) the clients and the logo issue.

As we well know the client never knows what he or she wants and aver if they think they do - this only proves they don't - we still respect and apprechiate them though

Luckily for us the navbar in Mobirise Buidler has two states - initial and fixed top - so why don't you try playing around with them giving the client the larges logo possible ?

I played around with this back in the summer last year when the v.3 just came up and king of managed to gather a styling script taking case of everything I cpuld think of at the time regarding the navbar (still haven't figured out it misbihaves at medium screen widths at the time though - this came later ) so I think in case you haven't found it already you might be interested to take a look - I supose you might find some use to it

I think you can use it for setting different sizes for the logo initially and when page scrolled down - and of course if something comes up - I'll try to help as well

And yep I suppose you're wright - there still are a few more things we could ask from the Builder but let's face it - it gives us a lot already And looking at the way things are going - I think we just have to wait for it - it won't be long

Hello @filyov I understand what you said earlier, but I have only the "free" version, without any extensions, so i don't have HTML/CSS Builder, I can't modify the source code. I still have the problem , they're working only in my left monitor at home, but still bugged on each other PC, even if my new navigation menu is shorter than my old navigation menu (screen in my first post).The problem is that there are so many blanks between the logo (because I hid the text near the logo) and the first title on my menu, what can I do then ?

I have an other problem too with the responsive background-image, the overview is perfect in PC, but when I switch in mobile or tablet version, the software takes a part of the background ( I understand here) but it's not the "important" part. With the same background :

But it's not the question on this topic so I completely understand if you wouldn't answer (but it's responsive subject so... idk)

Thanks for your replies.

(Sorry for my english, i'm not English so I make my best to be understandable, I hope you'll understand)

@Seraph you can custom style the elements of your Mobirise Project right from the builder in the basic version but you won't be able to see the chages being reflected inside the Builder which in your case doesn't make any difference, does it? After all since you managed to edit the sub leveles of the navigation menu this means you had access to them

Here is a thing - you have probably noticed that in the site settings dialog box (ca be found under sites > current site's gear box ) you have a field called Google Analytics. What it dies is placing its contents directly in the beginning of the body on each of the pages in your project. So in case you don't have the Code Editor you can use this field and place some styling rules wrapped in a <style> tag inside. What will happen?

The style tag will appear and get read before the content of the pages and since it's the very last styling script the browser reads what's inside will count. A few things to consider - unlike the scripts in the Code Editor's Custom CSS field the selectors in such style tag should be a bit more precise since the Builder won't automatically add in front of them the ID of the blocks they concern. So for example something like this

<style>
h1 {
color:red;
}
</style>

will result all the main headings all over your project being colored in red while placing just the rule - without the style tags since in this case they are not needed - in the Custom CSS field of a particular block will change the heading of this block only ending up in the published project's custom style stylesheet as something like:

Finally - why the style tags are needed for the Google Analytics field and for the Custom CSS are not? The content of the GA field gets inserted into the HTML documents and the Custom CSS - into a CSS file being referenced inside the HTML by a style tag from the Builder. So in order your rules to be properly read and processed you should define them properly as well

On the other hand the Navbar is mroe or less special case since most of the classes used inside it are specific and are used only there. So generally you can use the styling snippets posted around as they are (without adding the navbar ID in front of each selector) placing the instead of the h1 rule from the first example. Of course - make sure to regulary check the results on preview / publish since the styling defined this way doesn't get shown inside the Builder's window And in case you found a rule spreading beyond the navbar - just look up its id with something like Mozilla or Chrome developer tools and place it in foront of the selector.

Hey Mack, Look what I just found today - it looks like we can actually have different menus on pages and (this one confuses me a bit - haven't tried it out so far) the links still will update.

In brief as far as I got it the routine is this - insert a menu block and set it up then just duplicate that page cleaning it out of content and placing the new one. So far - nothing interesting but here it comes - insert a new page, remove the menu block inside it and insert THE OTHER ONE - like if you have inserted the transparent before now drag / click the solid background one or in case you have the block pack for Mobirise 3 - insert the menu it comes with - the one with the contact details above.

The result - three different menu layouts with three independent structures in a single project without extra javascript / jquery code handling it - cool ha!

but I think it needs a bit more playing around in order to see how the things work in detail. Another thig I think I figured out is this - if you create a new page it gets inserted with a menu block already included taking the same block as the one on the page you had active in Builder right before clicking on the Insert new page button

Should now play around to see how and if the custom styling gets transferred or is it as we discussed above - each menu blocks for itself. I think the links for each type of block will automatically update since I removes a link and got it removed on all pages with this particular navbar but still I think we'll have to apply manual edits to each type of menu we insert since these are actually different blocks - can't be the other way around and it's not that much work anyway - I think navigation should be consistent through the entire site so except for this testing workaround I can't really imagine why one could have some many of them but it still is a cool thing worth being noticed - we never know what the clients will think of

Anyway - hope you'll find this useful - do write back if you find some time playing around with it - so shall I