I had built a multilingual Joomla 3.4.1 site last week, it uses a modified version of Protostar template with horizontal menu (" nav-pills"). When I'm browsing my site on PC it's okay: PC browser 800+ px

Under width:768px my menu partially disappears, I can see only the active item: Under 768px

On PC I can see menu items when I'm hovering with my mouse but on mobile devices in portrait mode I can not hover because there is no mouse. I just can click somewhere and the site or a sub-menu will load. on hover iPhone portrait

How can I fix the menu on mobile devices if in portrait mode width is lower than 768 px?

  • Do you have any live url to see the problem?
    – webchun
    Jul 9, 2015 at 12:19
  • Does it work properly in Protostar (unmodified)? I suspect that the issue is probably with your modifications. As others have already pointed out, we can't provide a fix without knowing what the issue is, and we can't do by looking at screenshots. Jul 9, 2015 at 16:59
  • URL is link Yes, it does work with original Protostar properly. Now, I have fixed the code it was site specific. The bottom of header image is #000066 but menu items background-color was inherited (white). I've added background-color: #000066; to line #2963 and it is working now.
    – Vikitorony
    Jul 10, 2015 at 9:01

1 Answer 1


I can't give you any specific code as you have provided any of your own, nor a link to your site for a live preview, but to answer your question in regards to targeting a width of lower than 768px with the orientation as portrait, you can use the following CSS:

@media (max-width: 768px) and (orientation: portrait) {
    .nav-pills > li > a {
        background-color: #1947d1;
        border-right: 4px solid #ed1c24;
        color: #fff;
  • Sorry, my bad. URL is link I just tried "and (orientation: portrait)" code but it doesn't really helps.
    – Vikitorony
    Jul 10, 2015 at 8:48
  • @Vikitorony - I've updated my answer with the code. Add it your your template CSS file
    – Lodder
    Jul 10, 2015 at 8:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.