Menu Not Displaying Correctly

Hello,

I am new here. I recently subscribed, downloaded, and installed the News 2 template for my live website. I just realized that when the website is viewed on mobile phone, the logo shows as "text" and the drop-down menu does not appear as seen in the template's demo.

Secondly, probably due to my increased menu items on the main menu, the logo does not align with the main menu when you scroll down on a laptop as seen in the templates demo.

Lastly, how can I change the background colour and font colour of the main menu? I would like to try white font on black/red background for the main menu instead of the white background.

Joomla version: 2.5.20
Development website: 2014.myJCR.com
News2 Template version: 3.11.3

Thank you.

Could you please post an url to your site?

Could you please post an url to your site?

http://2014.myjcr.com

Wondering if I requested for the support I PAID for at the wrong place. It's been over 24hours now...no response.

I have been able to resolve the second issue by editing the menu padding in menu.css and also deleting one menu item but the problem with mobile view persists. When I scroll down on mobile phone, the logo and menu disappears.

I really need help, I need to present the website to the client in less than a week from today. Please help.

Please don't bump your questions - it makes you wait longer, as with every update the thread goes down in our queue list.

1. From what I see - your logo looks fine on mobile
2. Don't modify template core css files - use override.css instead (enable its use in template settings)
3. Modifying menu colors:
Please edit: /templates/gk_news2/css/override.css and add at its end:

Code: Select all

.gkMenu > ul > li {background: red; }
.gkMenu > ul > li a {color: blue}


Remember to enable "CSS override" in template settings - advanced section.

4. On mobile menu and logo shows correctly. Could you provide more details about your mobile os and brand?

Thank you.

I tested the site on HTC Desire S S510e, Android version 2.3.5, and Opera Mini version 7.5.35199. The logo appears alright when you open on the phone but when you scroll down, the logo and menu disappears.

It looks like on some devices modernizr wrongly detects .svg file support. Please modify the css to use only .png:

Code: Select all

#gkLogo.cssLogo,
#gkLogoSmall.cssLogo {
   background: transparent url('../images/style1/logo.png') no-repeat 0 0 !important;
   /* You can specify there logo size and background */
   height: 50px;
   width: 129px;
}


Thank you. I applied the fix in the override.css and the logo now appears in Opera Mini when the site is opened but the menu appears as text "Hom" with "h" below it.

Secondly, the logo and "error menu" all disappear when the page is scrolled. The url of the site is now http://www.myjcr.com (I have moved it from 2014.myjcr.com).

I have attached two (2) screenshots that indicate the error in green.

shot-01.jpg

shot-02.jpg

1. I see you are using some 3rd party extensiosns loading strange css:
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.myjcr.com/media/sourcecoast/ ... tstrap.css

Please disable any 3rd party css extensions adding anything to the layout.

2/3. The screenshot with "menu" - I don't see any element on your site that might show like that. The attached screen also doesn't show social icons, search etc, and I don't know from where it was took. Also with the comment element.
It might be some opera mini issues with rendering font-awesome / custom font, but if that is the case - there isn't much we can do with it.

Please check how opera mini renders font-awesome icon's page:
http://fortawesome.github.io/Font-Awesome/icons/

Thank you Cyberek.

1. The only 3rd party extension I have installed that uses css for its layout is the slideshow published at the "top1" position.
Unpublishing it does not solve the problem. Please how do I determine the culprit extension?

Sorry I do not understand what you mean by "Failed to load resource...". Do I need to do something?

2. I have replaced the font-awesome icons I used for the social icons with the default one but the error still exist.

3. I used an image editor to include everything in green colour to indicate the error I referred talked about. I wrote "LOGO" at the left and "MENU" at the right to indicate that I expected to see the site's logo and menu at those positions when I scrolled the site on Opera Mini.
I may have to acknowledge that, the site displays correctly when other browsers are used. I have used "default" browsers of many different phones and the site loaded correctly. It loads well too on phone when chrome is the browser. I am worreid Opera Mini is not loading correctly because Opera Mini is the browser majority of my mobile visitors use. The screenshots were taken from Opera Mini on Samsung Galaxy S2 Skyrocket.

Have you tried to load FontAwesome site in opera and check if icons shows correctly?

Yes, it does not display well. I think the issue is with Opera Mini itself. I opened random Joomla websites by different developers via Opera Mini and discovered similar issues...some icons had turned into Japanese/Chinese words.

Thanks for your help. I will consider this topic resolved and closed.

Yeah, I was afraid of that . Sadly it seems Opera Mini has it's own way of rendering sites and "understanding" html and css and doesn't follow standards. There is nothing we can do about it .