Drop down menu doesn't work in Google...

User 187934 Photo


Senior Advisor
20,267 posts
Online Now

I miss a bite now and then.:lol:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 127801 Photo


Registered User
55 posts

Can I pick your brains a little bit more? There are two issues.

1. I can't work out how the css for the menu decides the width of the overall menu or the point size of the type. Ideally I'd like to widen the menu and reduce the point size. But there is noequivalent of CC's menu-menu where you set these parameters in the demo stylesheet. Is this controlled by javascript in this case?

2. On my tablet the demo of the menu fits within the screen and has arrows pointing down at the right hand side. On my version it overruns the right hand side of the screen and if you scroll across there are no arrows. I don't know what I've changed that has caused this. It isn't a great problem. The menu items are visible and the menu works perfectly. I'm just baffled.
User 187934 Photo


Senior Advisor
20,267 posts
Online Now

In the style.css the image in these blocks won't load. Check that the image is in the proper location compared to the actual css file.

.nav > li > .parent {
background-image: url("images/downArrow.png");
background-position: right center;
background-repeat: no-repeat;
}



.nav li li .parent {
background-image: url("images/downArrow.png");
background-position: 95% 50%;
background-repeat: no-repeat;
}


It looks like this area is controlling the width.
.container {
margin: 10px auto;
max-width: 900px;
width: 90%;
}
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 127801 Photo


Registered User
55 posts

I've got the arrows in place. I changed the margin to 0px and got rid of some extra space above the menu and I changed the width to 100% and it now fills the width of the page on the desk top. But unfortunately the 100% setting screws up the page when you look at it in the landscape view on the tablet. Before, the page was narrower than the width of the screen and the whole page fitted perfectly onto the screen. Now it is wider than the screen and it looks horrible so it seems I can't have it both ways. Either I have a narrower menu on the desktop and landscape view but the page presents properly on the tablet or I have the menu the "correct" width on both but the page looks awful on the tablet. I guess I'll have to opt for the narrower menu.
User 187934 Photo


Senior Advisor
20,267 posts
Online Now

I'm thinking your container will need a little more tweaking to be properly responsive.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 127801 Photo


Registered User
55 posts

I think I've messed up somewhere. Trouble is I'm doing making so many small changes and looking at it in so many browsers I can't remember what happened earlier. At the moment only Chrome is presenting the page properly in landscape view in the tablet, that is to say it allows a little margin of yellow on either side of the web page. Firefox now puts the text right up against the edges of the screen. I feel sure that it wasn't doing that earlier. Opera is just hopeless. It won't even put the menu on one line which the other browsers do. It also puts the edges of the web page right up against the edges of the screen in landscape view. I'm sure I've restored all the changes I made so perhaps they did make it look like that earlier but it isn't my recollection. Too much fiddling and not enough knowledge. That's my problem.
User 187934 Photo


Senior Advisor
20,267 posts
Online Now

You might want to test on a page that only has the nav on it to rule out other issues.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 127801 Photo


Registered User
55 posts

I reinstalled the original style.css that I downloaded from the website and changed just the colours like I did originally. It works OK. What I don't understand is why Chrome shows both the old and new menus in the same way, i.e. with a thin margin of yellow down each side, while Firefox and Opera show them differently. The old menus appear with the margin but the new menu is pushed right to the edge of the screen in both these bowsers and Opera also refuses to put the menu on one line. I assume it must be something to do with the way that Firefox and Opera have been designed to interpret the code and this is different from the way Chrome does it. I don't think it's because of anything I've done. As I say I reinstalled the original style.css that I downloaded from the website and changed only the colours, so I haven't changed anything that could affect other aspects of the appearance of the page. The only thing I changed on my own stylesheet was the width of the wrap and associated pictures and I've changed all of them back.

I've also discovered another problem. Neither Firefox nor Opera will load the videos when I click on the video icon, while Chrome loads them straight away.

It seems to me that there is definitely something different in the way these browsers interpret the code. I think I'm going to have to stick something on the home page saying that visitors with mobile phones or tablets should use Chrome to view the site.

Anyway, that's me done for today.
User 127801 Photo


Registered User
55 posts

Back onto the case and I've discoverd a new problem with Chrome. In portrait view the web page opens larger than the screen but the text wraps to the edge of the screen. When you pinch it so that the whole page appears on the screen, the text doesn't wrap again so the right hand margin of the text now ends about two-thirds of the way across the page and leaves a large yellow gap down the right side. It rectifies itself when you turn it to landscape mode, but it's just an additional problem I can't solve. I need the menu because my menu doesn't work in tablets, but the price I pay in bad looking web pages is getting very high, possibly too high. I'll have to try and find out why the web pages open enlarged in the portrait position in all the browsers and at least see if I can fix that. But I am really beginning to think that the expenditure of time on this vastly outweighs the need to cater for half a dozen people a day who visit my site on an android device.
User 187934 Photo


Senior Advisor
20,267 posts
Online Now

I think you may want to d a little more reading on responsive website design.I haven't made one yet but am reading a little and looking to get one up and running to learn the principles behind it. There's several directions to take with responsive design. This may help you get your navigation behaving properly.
http://www.1stwebdesigner.com/css/respo … -tutorial/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.