I had posted this in another area, but am thinking it's more accurate being posted here. So, not to clog up the forums:

Okay, I have run into a bit of a snag here and I am hoping you guys can help me figure it out. I used the theme Vintage and then just used a hue change on the background.png file. When I look at the index.html file on the mobile device, the link for Home is a slightly different color than the other links! I cannot see this change on the desktop site version. I have uploaded the template, intact, with only the background.png file being replaced by background2.png. Can anyone help me figure out why it's doing what it is doing? The sample can be found at:
http://www.merievertcounseling.com/vintage/

and it does not matter if the background is a new solid color (it's green now), it still shows the difference in color on the row for the home link vs the other links. Could it have anything to do with the spacing (desktop site) between the menu and the body of the site?? It's driving me nuts!!

In short, the issue is that the row that surrounds the "Home" link on the mobile site is a slightly different color than the other links, and I cannot figure out why. I am hopeful that one of you can steer me in the right direction!

TIA,
Michelle

Michelle,

I am not a 'hard coder' but I'll take a shot at this one. I see what you are seeing. The 'orange' coloring is styled in the CSS of the menu. As the menu reaches the 'break points' the CSS style changes to accommodate the various screen sizes. On the 'phone' screen the coloring simply was not used in the CSS. You can of course add it, if you know how to use HTML and CSS. The files are editable. The 'Theme' is basically just a starting point and you can change anything in it that you want.

If you need more help with this, hang in there and I'm sure one of the 'coders' can help you out more.

Looks to be on line 523 of the default.css
background-color: rgba(255, 255, 255, 0.6);

I think you must have altered some of the margins for either the header or the nav as I have worked with this theme and know the original theme has a transparent background in that area. when viewing in smaller screens.

Hiya Michelle,

I've deleted the other 2 posts that were in that other thread and I've copied the post contents to your first post here so there's no reference to the other thread now. Please try not to repost in duplicate places, easier to have someone move your original posts to a new location rather than having multiple people answering you in multiple places. Just ask in the original thread when you create posts that you want moved and someone will be glad to move it for you. Good luck!

Gunsmoke, Eric, thanks for responding.
JoAnn, thanks for moving the posts!

Eric, what you see in the link I posted is the original code with the exception of the orange background. Perhaps simply saving another background made that change, I don't know, but I know I had not made any specific code changes.

Now, let me head over to that line you referenced and see if I can make any positive changes there!

Eric,
you are a genius!! I changed the rgb values, just to see what it would do. Then I played with the transparency value, to see what it would do. In the end, it was the transparency value that was messing up the menu row. THANK YOU!!! It was driving me crazy!

Now, only one more thing that I would love to achieve ... how can I move the "Welcome" image up against the header, without the space between the nav bar and the welcome image?

Try placing the image inside the


Then line 379 of the defualt.css add some margin.

Then you need one other adjustment at the break point.

Eric,

PERFECT! Thank you so much for taking the time to noodle this out. I really do greatly appreciate it.

Michelle

Your welcome.
I love that theme. Coffeecup sure does make it easy.

I agree! I have some other responsive themes, but they are so convoluted and difficult to figure out. I decided to buy this Vintage theme and my (unpaid!) client is thrilled with the progress with it.