-
One of the consequences apparently of specifying different colors for the menu items is that when you display the menus in mobile width, the header completely disappears, swallowed up by the color specified in the design tab.
I can certainly live with this, but it would be nice if I could avoid this little glitch.
You can see what I mean at http://myparticularfriend.com
It doesn’t, incidentally seem to have anything to do with the fact that I’ve snuck in a background image in the header or that I’ve specified a double-sized header image.
Any advice would be greatly appreciated.
Jennifer
I works fine for me except that the first menu item overlaps the header logo, maybe make the header logo height smaller.
Maybe it’s just a Mac thing, but for me, in Chrome, Firefox and Safari, the header becomes my green background color and the logo disappears. Like I say, it’s quite acceptable, just not perfect. (I did try switching to a smaller logo, and it still disappears, if I specify a background color for the menu items other than the one predefined in the theme.)
My header is missing in Internet Explorer, but not in Chrome. Also, the header is so much taller than my image. See what I mean at http://www.dearstress.com – Any help is greatly appreciated!
Yes, dearstress, your theme does the same as mine. Did you change any of the colors in the theme menu items? I assume you changed the type color to that teal. Not quite sure what you mean by the header being taller than the image. Do you mean the image that comprises the sliders?
Mobile width, means narrow window. There are @media queries in style.css file, which says, what happen if the width is less than … The menu icon is visible, if the width is too narrow, unfortunately under/behind the search form.
That is caused in BAD settings css width for Search form for this: @media screen and (max-width: 760px) size. < Search it in the style.css and than try to set widths in %.It is set in pixels, so when the screen is too narrow, the Search does NOT change its width less than is set in pixels. Should be set in %. I played with this just yesterday. Solved. Save the copy of the style.css and play with it.
Menu item colors/width/…. are also set there. There is not problem in .php engine. Just only in CSS file.
My css FOUND BELOW @media screen and (max-width: 760px) size …
in style.css#header #searchform {
float:none;
width:50%; /* was 278px */
margin: 20px auto 15px 5%;
}#header input#s {
position: relative;
z-index: 888;
display:block;
width:65% !important; /* was 168px */
margin-left:0px;
background:#ececec url(images/search.png) right center no-repeat;
box-shadow:inset 1px 1px 5px 1px rgba(0, 0, 0, .1);
text-indent: 0;
}
#header input#s:focus {
width: 50%; /* was – 246px */
margin: 0;
}Thanks for responding, astandera, but unfortunately your solution doesn’t help me (although it may help dearstress). But because of your response, I looked at the problem more closely and added to my CSS definition this:
@media screen and (max-width: 760px) {
#access {
background-color: transparent;
}
}This turns #access transparent when the width is less than 760 pixels. This allows me to “see through” #access and see the logo underneath.
I just gave up too easily before when searching for the one bit of CSS that directly changed the position of #access.
Jennifer
PS For me, that makes this matter resolved.
Ok. When you have a taste to tune, for positioning try to play with something like:
display: block; position: relative; top: Ypx; left: Xpx; /* in pixels – relatively from where it is now */
OR
display: block; position: absolute; top: Xpx; left: Xpx; /* in pixels – absolutely from/in parent element (div …) */
OR/AND
margin: Xpx Xpx Xpx Xpx /* distance from: top right bottom left side */Regards
AloisOh, I also added this to @media screen block:
#header #searchform {
margin-top: -36px;
}That keeps the search bar from intruding on the menus. I hope that doesn’t cause a problem on some browser.
When the element is a block (div) or set to block like: display: block; (any html tag) then margin works fine.
If position is set only to: position: relative (without top: & left: … right: …) it works also perfectly. Keep in mind – pixels (px) have always the same dimension anytime. Percents prolog or shorten their width/height accordingly the parent element. So test it in all possible widths of the window in more browsers.
Just Install Opera, Chrome, IE multi installation and test. Sometimes it is a hardwork.
From Firefox – Open with ad-on may make opening the tested pade faster (right click > open with .. eg: Opera)
I am not a geek, so play and win 🙂Regards
AloisThanks for that, astandera. I found out my IE and Flash Player on my virtual Windows was out of date and had to update those. Looks like it works there, which is my biggest concern. Just wish I had an iPhone (my iOS Simulator is old and I need to update to Mountain Lion before I can download the new version). It’s always something.
Jennifer
You must be logged in to reply to this topic.