Display mobile responsive menu on a larger browser width

HTML-CSS
1

Hello everyone, first time here, nice to meet ya all!

I have a simple CSS issue which i just can’t sort out, no matter what i tried.
On my site (http://principiuldivin.md) the mobile drop-down navigation menu is displayed until the browser width is 767px, while the regular GUI horizontal navigation menu is hidden:

Starting with browser width of 768px the mobile drop-down menu gets hidden and the regular GUI horizontal navigation menu is revealed.

I would prefer the mobile drop-down navigation menu displayed until the browser width is 1000px, and only starting with 1001px width the mobile drop-down navigation menu replaced with the regular GUI horizontal navigation menu.

I kindly ask if anyone could have a look to point me to the right direction.

I will not include the CSS code here since it can be found in page code. Just wanted to mention that presumably 2 CSS files are involved in this issue, one is principiuldivin.md/templates/fontaine_j25/warp/css/responsive.css and another one is principiuldivin.md/templates/fontaine_j25/css/responsive.css and this is another issue i faced, since i am not really sure which one to edit.

Thank a lot!

2

Did you try to change the postion to aboslute in the csc?

3

Could you please specify for what element should i change the position to absolute.
Thanks!

4

the-nav-bar-so-u-can -rule-out-that-an other-elemen t-is-in -its-way
this is ussefully because it then will follow the natural flow of the page

5

OK, thanks for trying, I thought that fiddling with @media max and min width in a proper manner would be the solution.

6

You can try this. Below the max-width: 1220px media queries add new media queries in each css file.

http://principiuldivin.md/templates/fontaine_j25/warp/css/responsive.css
Line: 41

@media (max-width: 1001px) {
  .menu-responsive {
    width: 100%;
    font-size: 14px;
  }

  #header-responsive {
    display: block;
  }

  #header-responsive .searchbox {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  #header-responsive .logo,
  #header-responsive .searchbox {
    display: inline-block;
    width: 45%;
    vertical-align: middle;
  }
}

http://principiuldivin.md/templates/fontaine_j25/css/responsive.css
Line: 17

@media (max-width: 1001px) {
  #headerbar,
  #menubar,
  #breadcrumbs,
  #header-top,
  #header-bottom,
  .mid-divide {
    display: none;
  }

  #header-responsive {
    padding: 5px 15px 20px;
  }
}
7

Thanks lasjorg! It seems to be exactly what i need, except that for some reason starting with 768px width neither the mobile drop-down or regular navigation menu is visible, that is the exact strange issue i encountered as well, please see here: http://whatismyscreenresolution.net/multi-screen-test?site-url=http://principiuldivin.md/&w=768&h=1024 don’t forget to click on refresh button when device screen larger than 767px is set.

8

I didn’t even notice it was Joomla. I really don’t know too much about Joomla unfortunately but looking at the DOM the #header-responsive element is completely missing on first load at that screen size. Looking in the template.js file I see this.

http://principiuldivin.md/templates/fontaine_j25/js/template.js
Line: 206

$.onMediaQuery('(max-width: 767px)', {
	valid: function() {
		var header = $('#header-responsive');
		if (!header.length) {
			header = $('<div id="header-responsive"/>').prependTo('#header');
			$('#logo').clone().removeAttr('id').addClass('logo').appendTo(header);
			$('.searchbox').first().clone().removeAttr('id').appendTo(header);
			$('#menu').responsiveMenu().next().addClass('menu-responsive').appendTo(header);
		}
	}
});

You can try changing the max-width to 1001px.

You may also want to add any changes to CSS in the custom.css file as that is loaded after all other CSS files. But then again having the media queries located where you would logically expect them to be in the other CSS files would probably be preferred.

http://principiuldivin.md/templates/fontaine_j25/css/custom.css

9

Oops… my bad, sorry for being a noob

Specifying the proper number in template.js did it! now the responsive menu is shown even after page refresh

I’m sincerely grateful to you for all your mental efforts you’ve done to help me sort this issue out!

10

Not at all, I should have paid more attention. I just assumed it was WordPress for some reason.

Anyway, I’m glad it worked.