Screen size and menu lay-out JA Medicare

alex0703

Hello,

I'm using the JA Medicare template and have some problems with showing the site on laptop screens and iPad.

On my MacBookAir 13" the screen is too wide, there is a horizontal scroll slider and the menu does not fit. There is a wide gap between the logo and the first menu item.
On my iMac 21" no problem.

On the iPad in landscape format the menu shows up in two lines; there is a wide gap between the first menu line and the 5th menu option "Veelgestelde vragen" on the second line. How to get rid of this gap?

The front end of the website is not live yet; it's behind a login.
This is the url: https://www.antidepressiva.nl/component/users/?view=login&Itemid=101

Attached the screen shots and system info. Joomla and all extensions are up to date.

Thank you in advance!
Alex

=============

Systeeminformatie

php: Linux hosting4.mooijwerkt.nl 2.6.32-431.20.5.el6.x86_64 #1 SMP Fri Jul 25 08:34:44 UTC 2014 x86_64
dbserver: mysql
dbversion: 5.5.31
dbcollation: utf8_general_ci
dbconnectioncollation: utf8mb4_general_ci
phpversion: 7.1.23
server: Apache/2
sapi_name: fpm-fcgi
version: Joomla! 3.9.0 Stable [ Amani ] 30-October-2018 14:00 GMT
platform: Joomla Platform 13.1.0 Stable [ Curiosity ] 24-Apr-2013 00:00 GMT
useragent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.1 Safari/605.1.15

saguaros

alex0703

You can share the admin login info so I can take a look: https://cl.ly/3y3R0p24250G

alex0703

saguaros I shared the login info yesterday.

teitbite

alex0703 Hi. Please try add this to css:

@media (min-width: 1280px)
.container {
    width: 1200px !important;
}
}

@media only screen and (max-width:1279px) {
.navbar-toggle {
    display: block;
}

#t3-mainnav {
   display: none;
}
}

alex0703

I added this code at the beginning of the template: /domains/antidepressiva.nl/public_html/templates/ja_medicare/local/css/themes/blue/template.css because I use the theme blue.
I do not see any change.
Is this the right place to add the code? Is this the right template?

saguaros

alex0703

Try putting it to the file: /templates/ja_medicare/css/custom.css (Create this file if it doesn't exist)

alex0703

saguaros I tried this, but no result...

alex0703

I see there is a mistake in your css file. A { is missing after the first line. When I add it it's working and the menu shows correct on the MacBook.

There is still one little problem on the ipad in landscape. The menu shows in 2 lines and the distance between the 1st and 2nd line is too big. Do you have a solution for that?

Alex

alex0703

I shortened the titles of the menu items and now the menu fits in one line on the iPad.
So evertyhing is ok now.