Buttons, Videos & Header

This topic contains 23 replies, has 2 voices, and was last updated by  Andrew Misplon 2 years, 4 months ago.

  • Author
    Posts
  • #2172

    Amanda
    Participant

    Hi 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

    #2173

    Andrew Misplon
    Keymaster

    Hi 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

    #2174

    Amanda
    Participant

    Hi 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

    #2175

    Andrew Misplon
    Keymaster

    Thanks 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.

    #2176

    Andrew Misplon
    Keymaster
    This reply has been marked as private.
    #2180

    Amanda
    Participant
    This reply has been marked as private.
    #2181

    Andrew Misplon
    Keymaster

    Thanks.

    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.

    #2182

    Andrew Misplon
    Keymaster

    Checking everything else out shortly. Will have a solution for you in just a bit. Thanks 🙂

    #2183

    Andrew Misplon
    Keymaster

    Apologies 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;
    }
    #2184

    Andrew Misplon
    Keymaster

    Right 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.

    #2185

    Andrew Misplon
    Keymaster

    To 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.

    #2186

    Amanda
    Participant

    Hi 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,
    Amanda

    #2187

    Andrew Misplon
    Keymaster

    Thanks 🙂

    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.

    #2188

    Andrew Misplon
    Keymaster

    It 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):

    ————————————————————– */

    #2189

    Andrew Misplon
    Keymaster

    It doesn’t look like the other styles I sent have been inserted yet. That explains the height related issues.

Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.

Scroll to top