I wanted the header area to have gradient fill instead of a solid colour, so I inspected the page (on my Windows 7 PC with Firefox; I could not figure out how to do it on the iPad) and found the css that defined the header area and redefined it in my child theme css to have gradient fill.
Note: If the css definition I am using is incorrect or inefficient, please feel free to correct me.
So, using the inspector, I found two elements that needed defining and redefined them both, with fallback css in case of older browsers, using the css code shown below: (this worked perfectly on a Windows 7 PC running any one of :
– ie 10
– Firefox 35.01
– Chrome 40.0.2214.115 m (64-bit)
but did not work on an iPad running
– ios 8.1.3
On the iPad, I just got the solid colour background of the header area as defined in the Appearance -> Customize -> Menu -> Background
I assumed the Vantage theme defined some some different css elements for Safari/ios/iPad but when I disabled the responsive setting in Appearance -> Theme Settings, it dd not change anything.
So, here is the css code (in the child theme definition) :
/*
In this site, where we have combined the masthead and the main navigation bar at the top of each page
we want the background to have a gradient fill instead of a solid colour
*/
.site-navigation.main-navigation.primary.use-sticky-menu.sticky , menu {
/* Ultimate Fallback to just define color */
/* In this case, defined in the WordPress configuration in Admin -> Appearance -> Customize -> Menu -> Background */
/* so not redefined here. */
/* background: #001958; */
/* IE 9 (could be data URI, or could use filter) */
background: url("../../../uploads/2015/02/HeaderBgGrad_1x150.png") repeat-x;
background-size: contain;
/* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
background: -webkit-linear-gradient(top, #001958, #0049ff);
/* Firefox 3.6 - 15 */
background: -moz-linear-gradient(top, #001958, #0049ff);
/* Opera 11.1 - 12 */
background: -o-linear-gradient(top, #001958, #0049ff);
/* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
background: linear-gradient(to bottom,#001958,#0049ff);
}
I works on the 3 main browsers on a Windows PC but not using Safari on an iPad
Any suggestions?
URL: http://mgmt2go.com
Hi Ramlin
It’s pretty similar but perhaps try this instead:
.site-navigation { /* fallback */ background-color: #001958; background: url(.site-navigation { /* fallback */ background-color: #001958; background: url(HeaderBgGrad_1x150.png); background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#001958), to(#0049ff)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #0049ff, #001958); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #0049ff, #001958); /* IE 10 */ background: -ms-linear-gradient(top, #0049ff, #001958); /* Opera 11.10+ */ background: -o-linear-gradient(top, #0049ff, #001958); }); background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#001958), to(#0049ff)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #0049ff, #001958); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #0049ff, #001958); /* IE 10 */ background: -ms-linear-gradient(top, #0049ff, #001958); /* Opera 11.10+ */ background: -o-linear-gradient(top, #0049ff, #001958); }There might be issues with the way you’ve handled the background image. Please go grab the absolute (full) url of that image and where I’ve said HeaderBgGrad_1x150.png, insert it.
Thanks
Well, that css did not work for me. In fact, it turned everything back to solid colour.
However, you gave me the idea to use less specificity in the class designation
So instead of using
.site-navigation.main-navigation.primary.use-sticky-menu.sticky, menu
to declare the class combination being defined, I used
.site-navigation.main-navigation.primary, menu
and now it works on Windows 7 browsers as well as iPad with Safari
the final code was:
/* In this site, where we have combined the masthead and the main navigation bar at the top of each page we want the background to have a gradient fill instead of a solid colour */ .site-navigation.main-navigation.primary, menu { /* Ultimate Fallback to just define color */ /* In this case, defined in the WordPress configuration in Admin -> Appearance -> Customize -> Menu -> Background */ /* so not redefined here. */ /* background: #001958; */ /* IE 9 (could be data URI, or could use filter) */ background: url("../../../uploads/2015/02/HeaderBgGrad_1x150.png") repeat-x; background-size: contain; /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */ background: -webkit-linear-gradient(top, #001958, #0049ff); /* Firefox 3.6 - 15 */ background: -moz-linear-gradient(top, #001958, #0049ff); /* Opera 11.1 - 12 */ background: -o-linear-gradient(top, #001958, #0049ff); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */ background: linear-gradient(to bottom,#001958,#0049ff); }Once again, proving two heads are better than one!
Thanks Andrew
R
Ahh, apologies about that, should have done more testing. Really glad to hear you were able to resolve. Looking back the issue could have been that you were targeting sticky with that turn off for mobile.
All the best.
I do have sticky menus enabled
Sticky Menu: Sticks the menu to the top of the screen when a user scrolls down.
and that does work on the Windows PC – it keeps the menu visible when I scroll down on the page.
That is why, when I originally inspected the elements, it came up with the sticky menu css declarations.
However, on the iPad, the menus do NOT stay on the top of the screen when I scroll down, even though I have checked/enabled:
Mobile Navigation: Enables Sticky Menu and Scroll To Top for mobile devices.
so I am thinking the sticky menu option somehow does not get translated when an iPad is being used so the more specific css declaration did not catch it.
I also have responsive menu selected
Responsive Menu: Use a special responsive menu for small screen devices.
and that does work on my Blackberry or when I resize my browser window small enough. I’m not sure if there is any interaction here causing an issue or not.
I’m happy to have the gradient fill working so that is good news.
If the menu is supposed stay at the top with an iPad when you scroll down, and you do figure out why it is not doing that, please let me know so I can make the necessary changes to my code.
Thanks again,
R
Thanks for the feedback there. Theme Settings > Navigation > Mobile Navigation is a new setting that should, when selected, render the sticky menu and back to top arrow on mobile devices. The default is OFF. Thanks for letting us know that this isn’t working for you. I don’t have an iPad but I’ll ask Greg to test on his. We’ll then attend from there.
Thanks again for testing this.