- This topic has 23 replies, 2 voices, and was last updated 9 years, 1 month ago by Andrew Misplon.
Tagged: buttons Videos & Header
- AuthorPosts
- August 30, 2015 at 1:46 am #2172
AmandaParticipantHi Andrew,
I am new to wordpress and have spent the last week trying out themes, researching basic information, etc. I decided on your theme bc its visually appealing and you provide prompt in-depth responses on your support page. I haven’t entered any content on my pages yet but I have some specific items that I know I want to incorporate. I am wondering if you can help me achieve the look I envision.
1. I would like the header to be much more narrow (approx 1/3 the size it is right now) and have the menu bar text centred to my logo. The size of the non-retina logo I have uploaded is 225 x 175.
2. I have added text and a button in the centre of my home page image. I do not have a slider on my home page as I only want one image there. I would like this button to show up as this font awesome code <i class=”fa fa-video-camera”></i>. The button will to access a video that I will upload to youtube. When someone clicks on the button I want the video to open in a popup window that they can close when they are done.Looking forward to your helpful response,
Amanda
August 30, 2015 at 9:16 pm #2173
Andrew MisplonKeymasterHi Amanda
Thanks for your support. I’ve been away from my computer today but will able to jump in tomorrow. Thanks for the wait 🙂 Chat then.
Cheers
August 31, 2015 at 5:22 am #2174
AmandaParticipantHi Andrew,
Thanks for the fast response! I was able to get the logo the size that I would like as well as the header by following the information I found in other posts on this forum. However, I’m not sure if the logo size is causing a problem with the responsive menu. When I look at the site on a phone or shrink my screen size the responsive menu icon does not align with the centre of the logo. It shifts to the very bottom right corner of the header which doesn’t look that great. Also the logo size doesn’t seem to adjust to the screen size. It stays the same so it looks really big on the mobile screen.
I also am not able to get the image on my home page to be responsive. I have been having this problem from the start and have tried a couple of the suggestions in the forum but nothing seems to work.
Hoping you can help me with these items.
Amanda
August 31, 2015 at 2:17 pm #2175
Andrew MisplonKeymasterThanks for the double wait 🙂 I’m ready to go. With most support challenges it’s really handy for us to have a website to look at. There is a lot we can do by inspecting the source code and making live adjustments which we later turn into little Custom CSS snippets. If your site is live, please, could you send the URL. You’ll find a “Set as private reply” checkbox below, handy if you’d like to keep your URL private.
August 31, 2015 at 2:20 pm #2176
Andrew MisplonKeymasterThis reply has been marked as private.August 31, 2015 at 3:58 pm #2180
AmandaParticipantThis reply has been marked as private.August 31, 2015 at 4:08 pm #2181
Andrew MisplonKeymasterThanks.
Nice job on your child theme. One small change. Here is how your style.css file ends at the moment:
/* Logo */ .site-header .site-branding img { width: auto;} -------------------------------------------------------------- */
It should look like this:
-------------------------------------------------------------- */ /* Logo */ .site-header .site-branding img { width: auto; }
That long line ends the comment that starts with /* =Theme customization starts here. CSS comments look like this:
/* Comment */
Hope that makes sense.
August 31, 2015 at 4:14 pm #2182
Andrew MisplonKeymasterChecking everything else out shortly. Will have a solution for you in just a bit. Thanks 🙂
August 31, 2015 at 4:55 pm #2183
Andrew MisplonKeymasterApologies for the menu toggle position issue. It’s due to the custom header height being used. I need to work on a new way of positioning the menu toggle. Please, try the following in your child stylesheet:
/* Responsive Menu Toggle */ .responsive-menu .menu-toggle { margin-top: 22px; }
August 31, 2015 at 4:57 pm #2184
Andrew MisplonKeymasterRight now the logo doesn’t dynamically adjust. You can use the following:
@media (max-width: 680px) { .site-header .site-branding img { max-height: 45px; } }
Add that under the
/* Logo */
section in your child CSS. Adjust the 45px value as required. 680px is the breakpoint at which the change will happen.August 31, 2015 at 5:10 pm #2185
Andrew MisplonKeymasterTo get your image running nicely let’s do this.
1. Remove all the excess markup from the Text widget. This is all we need:
<h1 style="text-align: center;"><span style="color: #000000;">big stones to little stones</span></h1>
We’ll do the rest with CSS.
2. Edit the row concerned. Click Attributes top right, enter the following in as a Row class, the first field:
full-bg
3. Go to your child style.css file and let’s target this class:
/* Custom Page Builder Classes */ .full-bg[style] { background-repeat: no-repeat; background-size: 100% !important; } .full-bg h1 { color: #000; padding-top: 50px; } @media (min-width: 681px) { .full-bg { min-height: 870px; } }
(You can also strip the following from your h1 tag as we’re setting with CSS:
<span style="color: #000000;">
Mostly un-tested 🙂 Let me know how it goes.
August 31, 2015 at 5:28 pm #2186
AmandaParticipantHi Andrew,
The responsive menu is now centred with the logo – YAY!
The image is responsive on my desktop. I edited the text widget as outlined above however it is just showing the code on the website now. Also, on my mobile the image is basically non-existent. It only shows the code and the little bit of the image behind this code. Maybe I missed something.
The logo height will still not adjust. I set the max height to 5px and still no change.
Thanks,
AmandaAugust 31, 2015 at 5:31 pm #2187
Andrew MisplonKeymasterThanks 🙂
Edit the Visual Editor widget, click over the Text tab and remove everything, next, insert:
<h1>big stones to little stones</h1>
Find full-bg h1 in your style.css file and replace it as follows:
.full-bg h1 { color: #000; padding-top: 50px; text-align: center; }
All we’re doing there is putting the text align into our CSS for easier control from one place.
August 31, 2015 at 5:32 pm #2188
Andrew MisplonKeymasterIt looks like you’re using a Custom CSS plugin. That’s great. Rather take all of your CSS from the child style.css file and put it into your Custom CSS plugin.
So everything after this line in style.css (child):
————————————————————– */
August 31, 2015 at 5:33 pm #2189
Andrew MisplonKeymasterIt doesn’t look like the other styles I sent have been inserted yet. That explains the height related issues.
- AuthorPosts
You must be logged in to reply to this topic.