Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
I styled some elements that I added to the header. I noticed that when I reduce the size of the browser window to mobile phone size and the website switches to mobile phone menus, my styling goes away.
It looks like the website theme is switching to the following style sheet when it goes mobile:
/wp-content/themes/vantage/premium/extras/mobilenav/css/mobilenav.css
Is that correct?
Is there a way to create a child theme css style sheet for “mobilenav.css” so I can maintain the styling of the elements I added to the header even when the site switches to mobile styling?
Thanks.
Website Login Credentials:
Username: demo
Password: demo01
I think I found the answer to my second question about creating a child css style sheet. I believe I need to use the wp_enqueue_style function. I found a video course on it at Lynda.com:
If you know of a simpler way, please let me know.
I still need to know if
is the correct style sheet to make mine dependent on?
Do you happend to know what the handle for it is?
Thank you.
Hi MeOnWrdPrs
You’re definitely on the right track here. If you just need to style the mobile menu you can use a set of selectors under Appearance > Custom CSS OR in the style.css of your child theme.
Here we go:
/* Mobile Nav */ .mobile-nav-frame { background: #222222 !important; } .mobile-nav-frame .title h3 { color: white !important; text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.8) !important; } .mobile-nav-frame ul { background: #212121 !important; border: 1px solid #111 !important; } .mobile-nav-frame ul li { border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important; border-top: 1px solid rgba(255, 255, 255, 0.05) !important; } .mobile-nav-frame ul li a.link { color: #F3F3F3 !important; text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7) !important; }Hope that helps.
Thank you for the CSS code to the mobile navigation menu. It may be helpful in the future.
I have been thinking about my problem since your last post, and realized that the CSS code in my child theme CSS style sheet is working up to the point of reaching my 680 max-width media query. So, I think if I can get the right selectors placed in the child theme style sheet, I will be done, rather than programming more php. (I now know that importing the master style sheet from the Vantage Theme, into the child theme, is not the preferred method, but I need to get done relatively soon and importing works)
I believe that I don’t have the right selectors in the child theme media query for max-width of 680px. I say that because I can change the properties of the target elements from the Google Chrome Developer Tool, but when I copy and paste the selectors from the Developer Tool to my child theme CSS, they have no effect. I must not have enough specificity, but I cannot tell from the Developer Tool what selectors I am missing. Everything looks like it should work. I hope this makes sense.
I have pasted the relevant portion of the CSS from my child theme style sheet. Can you tell if I am missing anything in my selectors that I may not see in the Chrome Developer Tool?
Thank you.
::::::::::::::::::::::::::::::::::::::::::::::::::::::Below is the CSS code from my style sheet:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
/************************************************************* 3. Mobile Styles: *************************************************************/ @media only screen and (max-width:680) { header#masthead .hgroup .support-text { /* Controls the layout of the "Request a Quote" button and the slogan, phone, e-mail contained in the header. */ position: static; display: block; margin-top: 30px; max-width: 90%; font-weight: bold; } header#masthead .hgroup .support-text .call-to-action a.blue.button { /* Controls the format of the "Request a Quote" button contained in the header. */ font-size: 120%; /* 15px */ padding: 20px 30px; border-radius: 12px; float: left; margin-top: 3%; background-color: #1874cd; background-image: -webkit-linear-gradient(top, #4f9eea, #1874cd); border: 1px solid #115290; color: #ffffff; text-shadow: 0 -1px 0 #115290; cursor: pointer; display: inline-block; } .et-slogan-header { /* Controls the format of the slogan, phone, and e-mail contained in the header. */ line-height: 1.2em; color: #339999; font-style: italic; font-weight: bold; font-size: 1.4em; float: left; margin: 4% 0% 0% 14%; } }/* End of Media Query */Glad to hear you’ve been making some progress. Could we perhaps approach things in the following manner…what else needs to happen in the header below 680px right now? What needs to change? Let me know that and I’ll help out.
(I’m pretty sure your breakpoint needs a metric, in this case px needs to follow 680)
I created a video clip of what is currently happening as I click and drag the right side of the browser window to the left while reducing the viewport size. The video should demonstrate the problem. I also provided a PNG file, diagraming what I would like to see happen. The URLs to the files are listed below:
URL to Video –> http://www.screencast.com/t/h2OAa9Lpm
URL to PNG –> http://www.screencast.com/t/h2OAa9Lpm
(Even though the URLs look identical, they seem to be file specific. I don’t know how.)
Please let me know if you need any clarification. Thank you.
The PNG is unfortuntatley not there on my side so I might have to see that. Try the following to keep the button style active below 680:
@media screen and (max-width: 680px) { .call-to-action a.blue.button { font-size: 120%; margin-bottom: 20px; padding: 20px 30px; border-radius: 12px; float: left; margin-top: 0%; background-color: #1874cd; background-image: -webkit-linear-gradient(top, #4f9eea, #1874cd); border: 1px solid #115290; color: #ffffff; text-shadow: 0 -1px 0 #115290; cursor: pointer; } }I’m sorry you couldn’t see the PNG file. Try these links. Hopefully one of them will work. I will test them. Apparently, Screencast.com was acting strangely yesterday.
You should see a diagram of what I am trying to accomplish.
PNG file —> http://www.screencast.com/t/GhsjDG4ikp
GIF file —> http://www.screencast.com/t/lyxQSccnz
BMP file —> http://www.screencast.com/t/iGKbIAqNjD1
JPG file —> http://www.screencast.com/t/M0CQKnfbQ3
I tried the CSS you provided. It hasn’t worked yet, but I think something must be blocking it. The browser acts like it is ignoring the 680 px media query altogether. I have to find a way to confirm that suspicion. I’m looking for ways to isolate CSS quickly so I can figure out what is going on.
Thank you.
I have confirmed that the 680 px media query is being ignored by the browser. I don’t know why, but I am going to figure it out. I must have done something incorrect.
Thanks.
The CSS I sent through wouldn’t have shifted everything on tablet, just sorted out the button formatting and placement on mobile view. Is the Custom CSS in place right now?
The header sidebar area is definitely sensitive on mobile when several widgets are added. This is something we can work on in the future. For now it might might be easiest to consider a banner there or just some solution that doesn’t require re-formatting breakpoints.
I have very good news. I’m done. Everything is working the way I wanted it to. Thank you for your help and suggestions. There was a typo in the media query statement for the mobile devices. That is why the media query was being ignored by the browser. URGH!!!! After that, it was just a matter of using the right styles and rethinking the media queries. I used a lot of percentages. Thanks again for your help Andrew. You can stop reading here. The rest is for the benefit of others.
For anyone else reading this thread:
Below are very basic instructions for anyone else reading this forum thread and trying to put something in the header between the logo and the “Header Text” and make it responsive. Warning: You will need to understand HTML, CSS, and Media Queries to make it work. I did things this way because I had trouble getting header widgets to cooperate. This isn’t a tutorial. I’m just going to provide the code I used. Hopefully, you can look at it and glean some ideas. Most of the style sheet is for the rest of the website. The media queries toward the bottom of the style sheet are the most important parts to look at.
First, within the WordPress Administration area, I clicked on Appearance –> Theme Settings –> Header Text field
Second, I pasted the following HTML into the Header Text field:
Third, I had already created a child theme for the Premium Vantage Theme with the file name, “style.css”. If you don’t have one yet, you will need one. I imported the Vantage theme into the child theme style sheet. I know that isn’t what WordPress recommends, but I was in a hurry and it worked. :)
(Note: I purchased the Premium Vantage Theme. This solution probably won’t work without it.)
Fourth, I put the following styles in my child theme style sheet and that is it:
/* Theme Name: ET Vantage URI: http://wpdevelopment.equity-title.com Description: Modifies the Vantage Theme from SiteOrigin.com for the Equity Title Website at http://wpdevelopment.equity-title.com Author: Version: 0.2.0 Template: vantage */ @import url('../vantage/style.css'); /************************************************************ ************************************************************* << Table of Contents >> I. Global Styles II. Media Queries Mobile Styles........................................1 Tablet Styles........................................2 Desktop Styles.......................................3 ************************************************************* ************************************************************/ /************************************************************ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ I.............................................Global Styles ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ************************************************************/ /************************************************************ All Pages ************************************************************/ .main-navigation ul li:hover > a { /* Changes background color of main menu items to Equity Title green when the mouse hovers over them. */ background: #339999; color: #FFFFFF; } #search-icon #search-icon-icon:hover { /* Changes background color of search icon to Equity Title green when the mouse hovers over it. */ background-color: #339999; } a,.entry-content a { /* Turns text links to Equity Title green. */ color: #339999; text-decoration: underline; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } a:hover { /* Makes all links turn Equity Title red when the mouse hovers over them. Including links in side bars. */ color: #990000; text-decoration: underline; } /* Overrides heading sizes in Premium Vantage Theme style sheet. */ .entry-content h1 { /* Changes the color of the text to Equity Title red. */ font-size: 1.8em; color: #990000; } .entry-content h2 { /* Changes the color of the text to Equity Title green. */ font-size: 1.6em; color: #339999; } /************************************************************ About Page ************************************************************/ #et_building_photo { /* Adds 5% margin on the bottom of the Equity Title building photo to put some space between it and the text on the page */ margin-bottom: 5%; } .entry-content img#old_republic_logo { /* Puts some space between the top of the Old Republic logo on the About Page and the text above it. */ margin-top: 3%; } /************************************************************ Accordion on FAQ page ************************************************************/ .w3eden .panel-default > .panel-heading { /* Affects panel colors */ color: #FFF; border-color: #13F72F; } .panel-heading .accordion-toggle:after { /* Affects the plus and minus signs at the right of each FAQ header */ font-family: 'FontAwesome'; content: "\f056"; float: right; color: #339999; } /************************************************************ Coverage Page ************************************************************/ /************************************ county_city_container Div ************************************/ #county_city_container { height: 500px; width: 100%; } /************************************ County CSS ************************************/ #cnty_lst_lbl { font-size: 100%; } #county_list { height: 160px; left: 10%; overflow: auto; position: absolute; top: 210px; /* 275px */ width: 17em; margin-top: 15px; margin-bottom: 15px; border: 4px solid #339999; padding: 10px; } #county_list ul li { list-style-type: none; background-image: url("http://www.yourdomain.com/wp-content/uploads/2013/11/Bullets.gif"); background-position: 0 7px; background-repeat: no-repeat; padding-left: 14px; font-size: 100%; } /************************************ City CSS ************************************/ #cty_lst_lbl { font-size: 100%; } #city_list { height: 160px; left: 10%; overflow: auto; position: absolute; top: 375px; /* 500px */ width: 17em; margin-top: 15px; margin-bottom: 15px; border: 4px solid #339999; padding: 10px; font-size: 100%; } #city_list ul li { list-style-type: none; background-image: url("http://www.yourdomain.com/wp-content/uploads/2013/11/Bullets.gif"); background-position: 0 7px; background-repeat: no-repeat; padding-left: 14px; } /************************************************************ Footer ************************************************************/ #common_wealth_trust_image { /* Puts some space between the top of the image and the previous element */ margin-top: 3%; } .entry-content a:hover { /* Affects links on hover */ color: #990000; } #footer-widgets aside#text-12.widget .widget-title { float:right; } aside#text-12.widget.widget_text div.textwidget div#prosperity_pact_image { float:right; clear:both; } aside#text-12.widget.widget_text div.textwidget div#common_wealth_trust_image { float: right; clear: right; } /************************************************************ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ II............................................Media Queries ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ************************************************************/ /************************************************************* 1. Mobile Styles: *************************************************************/ @media screen and (max-width: 680px) { header#masthead .hgroup div.support-text { /* Controls the layout of the "Request a Quote" button and the slogan, phone, e-mail contained in the header. */ position: static; margin: 7% auto 0% auto; width: 100%; max-width: 100%; } .call-to-action a.blue.button { /* Controls the format of the "Request a Quote" button contained in the header. */ font-size: 115%; padding: 5% 5%; border-radius: 12px; width: 53%; margin: 3% auto 3% auto; background-color: #1874cd; background-image: -webkit-linear-gradient(top, #4f9eea, #1874cd); border: 1px solid #115290; color: #ffffff; text-shadow: 0 -1px 0 #115290; cursor: pointer; display: block; text-align: center; } .et-slogan-header { /* Controls the format of the slogan, phone, and e-mail contained in the header. */ line-height: 115%; color: #339999; font-style: italic; font-weight: bold; font-size: 175%; margin: 2% auto; display: block; text-align: center; } }/* End of Mobile Styles - 680px Media Query */ /************************************************************* 2. Tablet Styles: Any screen greater than 681px wide and less than 930px. *************************************************************/ @media only screen and (min-width: 681px) and (max-width: 930px) { header#masthead .hgroup div.support-text { /* Controls the layout of the "Request a Quote" button and the slogan, phone, e-mail contained in the header. */ max-width: 68%; width: 68%; top: 5%; height: 100%; } .call-to-action a.blue.button { /* Controls the format of the "Request a Quote" button contained in the header. */ font-size: 115%; padding: 3% 5%; border-radius: 12px; width: 53%; height: 9%; margin: 2% auto; background-color: #1874cd; background-image: -webkit-linear-gradient(top, #4f9eea, #1874cd); border: 1px solid #115290; color: #ffffff; text-shadow: 0 -1px 0 #115290; cursor: pointer; display: block; text-align: center; } .et-slogan-header { /* Controls the format of the slogan, phone, and e-mail contained in the header. */ line-height: 115%; color: #339999; font-style: italic; font-weight: bold; font-size: 175%; margin: 2% auto; display: block; text-align: center; } }/* End of Tablet Styles - 681px and 930px Media Query */ /************************************************************* 3. Desktop Styles: Any screen greater than 931px wide. *************************************************************/ @media only screen and (min-width: 931px){ header#masthead .hgroup div.support-text { /* Controls the layout of the "Request a Quote" button and the slogan, phone, e-mail contained in the header. */ max-width: 68%; width: 68%; top:27%; margin-left: 14%; } .call-to-action a.blue.button { /* Controls the format of the "Request a Quote" button contained in the header. */ font-size: 120%; /* 15px */ padding: 20px 30px; border-radius: 12px; float: left; margin-top: 3%; background-color: #1874cd; background-image: -webkit-linear-gradient(top, #4f9eea, #1874cd); border: 1px solid #115290; color: #ffffff; text-shadow: 0 -1px 0 #115290; cursor: pointer; } .et-slogan-header { /* Controls the format of the slogan, phone, and e-mail contained in the header. */ line-height: 1.2em; color: #339999; font-style: italic; font-weight: bold; font-size: 2em; float:right; margin-left: 2%; } } /* End of Desktop Styles - 931px Media Query */I hope someone finds this helpful.
That’s awesome, really glad to hear you were able to troubleshoot your way through this. Thanks for sharing your results!