Protostar menu horizontal on desktop but vertical on mobile

[freewuns]

Hi,

Just setup my first website and looks ok for a first go. The trouble is that on my desktop PC the menu is horizontal but on my phone its vertical using the Protostar template.

Is there anyway to change something so that mobile devices will also display the menu horizontally? And explain it in a way for someone with limited experience?

Have tried googling without luck. I have also put the space in front of nav-pills

Thank you for your assistance!

[instrukcije]

I have the same problem . Anybody can help us . Best regards

[Per Yngve Berg]

It's supposed to be vertical on a Phone. The small screen size does not have room for a Horizontal menu.
Did you publish the Menu in Position-1? It will show as a button on a Phone.

[freewuns]

I also have published it in position-1.

Here is a screen dump.

[Per Yngve Berg]

Give the Menu Module a Menu Class Suffix " nav-pills nav-collapse"

[Per Yngve Berg]

A little modification of the Template is necessary.
Change the index.php of the Template.

Code: Select all

			<?php if ($this->countModules('position-1')) : ?>
				<nav class="navigation" role="navigation">
                                      <div class="navbar pull-left">
                     			<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
   			                  <span class="icon-bar"></span>
						<span class="icon-bar"></span>
       				             <span class="icon-bar"></span>
	       		              </a>
			              </div>
 
					<jdoc:include type="modules" name="position-1" style="none" />
				</nav>
			<?php endif; ?>

[JAVesey]

Give the Menu Module a Menu Class Suffix " nav-pills nav-collapse"

Sounds good!

Can you give step-by-step instructions? Presumably this is a Template Override rather than a core-files hack?

Many thanks

[Per Yngve Berg]

It's not an override. It goes directly into the Template's index.php. This is a Template Modification and not a hack.
You may copy the Protostar Template to a new Name.

[JAVesey]

It's not an override. It goes directly into the Template's index.php. This is a Template Modification and not a hack.
You may copy the Protostar Template to a new Name.

True - many thanks!

It was the "Give the Menu Module a Menu Class Suffix " nav-pills nav-collapse" " that I was asking about though ;-)

[Per Yngve Berg]

The Menu Class Suffix is set on the Advanced Tab in the Menu Module.

[JAVesey]

Many thanks - will give it a go later

[JAVesey]

Works really well but with one issue. When clicking on the button (in collapsed mode) and the menu expands vertically downwards (good!), submenus for menu items at the bottom of the list do not fully display. They are truncated at the bottom of the space that "position 1" occupies on the page. Sub-menus for menu items which appear earlier as fine.

Is there a way around this?

Many thanks for you help with this

[Webdongle]

Menu disappears for me ... will try again

Addendum
DDDDDDDDDDoooooooooooooooooooooooooh ... I forgot to set the copy as default

Why not set a pull request for it in github ?

[JAVesey]

Menu disappears for me ... will try again

Addendum
DDDDDDDDDDoooooooooooooooooooooooooh ... I forgot to set the copy as default

Why not set a pull request for it in github ?

Good plan, but it would be nice if Per Yngve Berg did this as it's his code

A "nicer" button would be good.... maybe like this?:
http://www.llanmon.org.uk/modules/mod_i ... tn_JAV.png

[freewuns]

I would still like to see the menu horizontal showing all the time instead of using a button to reveal the menu!

[Per Yngve Berg]

It's not my code. I got it from here: http://www.byman.it/site/index.php?opti ... Itemid=154

The approach have some weaknesses. I think it should have been rewritten as a Module Chrome in the template.

JAVesey@

That button is now Standard by Windows 8 and nearly all newspaper sites around the world, so changing it is not a good idea.

[Webdongle]

The Protostar index.php would need to be edited. Also nav-pills would need to be changed to nav-pills nav-collapse in every type of test data for every database type in the installation/sql folder (15 files).

Addendum
Have manage to adjust the code in Protostar's index.php to negate the need to add module class suffix in the menu module. Created a tracker with pull request https://github.com/joomla/joomla-cms/issues/6850

[JAVesey]

Addendum
Have manage to adjust the code in Protostar's index.php to negate the need to add module class suffix in the menu module. Created a tracker with pull request https://github.com/joomla/joomla-cms/issues/6850

Nice one fella

Will test later this evening. Does this get over the sub-menu display issue?

I have a feeling that this will be a popular change.

[Webdongle]

... Does this get over the sub-menu display issue?
...

Yes ... it is virtually the same code. The only difference is <jdoc:include type="modules" name="position-1" style="none" /> is wrapped in a div with nav-collapse as the class. This negates the need to make it a module class suffix for the variable(in the module's default.php) to render it.

...
I have a feeling that this will be a popular change.

If the devs agree it is needed and like the added code.

[JAVesey]

It works well apart from the aforementioned sub-menu display issue. Please see the screen grab below. There are four items in the sub-menu but the list is cut-off at the end.

The responsive menu I'm using on the live site displays all the menu and sub-menus in one long list. If the sub-menus in your code could be made to float over the modules underneath position 1 it would be perfect

[Webdongle]

The position of the hover menu is a matter of personal preference and design. Whatever it's exact position it would not be everyone's choice.

Please report your test results on http://issues.joomla.org/tracker/joomla-cms/6849 thanks

[freewuns]

OK guys I have done the suggestions by Per and still vertical menu. I put back to original code but now my desktop stays vertical without the button around the text and same on mobile. I did a full restore from the backup I made before changes including the DB.

Also can we get back on topic with my original problem please

Any ideas on getting my site back to the image I posted above and is it possible to get the menu horizontal on mobiles?

Thank you

[Per Yngve Berg]

You have you set " nav-pills" as Suffix?

You have to change the css for the different screen sizes.
For tab and Mobile (screen width up to 979px, template.css:5554)

Code: Select all

@media (max-width: 979px)
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
  padding: 9px 15px;
  font-weight: bold;
  color: #555;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
@media (max-width: 979px)
.nav-collapse .nav > li > a {
  margin-bottom: 2px;
}

Desktop (template.css:5705:

Code: Select all

@media (min-width: 980px)
.nav-collapse.collapse {
  height: auto !important;
  overflow: visible !important;
}

[JAVesey]

Also can we get back on topic with my original problem please

Any ideas on getting my site back to the image I posted above and is it possible to get the menu horizontal on mobiles?

Thank you

Your original issue was answered, i.e there isn't room on a mobile display to have the menu display horizontally, hence it displays vertically. If you look at your site in a browser on a PC and gradually reduce the window width you'll see how the menu alters until the point is reached where it can do nothing else other than stack the items one on top of the other.

To get back to where you were you need to put the index.php file back as it was and remove "nav-collapse" from the code you entered for the module.

[freewuns]

You have you set " nav-pills" as Suffix?

You have to change the css for the different screen sizes.
For tab and Mobile (screen width up to 979px, template.css:5554)

Code: Select all

@media (max-width: 979px)
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
  padding: 9px 15px;
  font-weight: bold;
  color: #555;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
@media (max-width: 979px)
.nav-collapse .nav > li > a {
  margin-bottom: 2px;
}

Desktop (template.css:5705:

Code: Select all

@media (min-width: 980px)
.nav-collapse.collapse {
  height: auto !important;
  overflow: visible !important;
}

OK Per I have everything back to original config with " nav-pills" as suffix. For example my HTC One M8 has a screen res of 1080x1920. Do I just change the lines in the Protostar template.css from 979 to 1080 to see on my phone or? The code you included is the same as mine except mine has more and slightly different info at the specified lines in the css file. Do you want me to upload the css for you to have a look at?

Thanks for being patient

[Per Yngve Berg]

The Site I inspected also hav " nav-collapse" set. That explains the differences., but you get the idea of how it works.

[JAVesey]

OK Per I have everything back to original config with " nav-pills" as suffix. For example my HTC One M8 has a screen res of 1080x1920. Do I just change the lines in the Protostar template.css from 979 to 1080 to see on my phone or? The code you included is the same as mine except mine has more and slightly different info at the specified lines in the css file. Do you want me to upload the css for you to have a look at?

Thanks for being patient

A word of caution; not all smartphones have a screen resolution as high as your M8. For example, the iPhone 5S has a screen resolution of 640 x 1136 px in portrait mode. Generally, to make your site usable for most viewers you should take things like this into account.

[freewuns]

Thanks guys. As for the screen res I was just using my HTC as an example and would use a lower figure for smaller phones.

Will plug in different numbers to see if it works on my phone!

[freewuns]

I put in 600 on line 5554 and 601 on line 5705.

No difference.....am I looking at this the wrong way?

[Webdongle]

https://developer.mozilla.org/en-US/doc ... ia_queries may help
example ... N.B. the '@media only screen' wraps around the css class so the browser uses code for the width of the device. It works like an IF statement

Code: Select all

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width:960px){
        /* styles for browsers larger than 960px; */
.classname {
  color: red;
  }
    }
    @media only screen and (min-width:1440px){
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width:2000px){
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width:480px){
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width:768px){
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>