2 Little tweaks on asite

I am trying to do a few things my limited CSS skills can't achieve on a website, ruumicup.com.

- Dark upper band/header on Home screen is very thick on mobile. It needs to be thinner.
- I'm trying to make the play button on the slider (which is an image) change to green (a different image). It has a problem when you hover over it: a ghost edge line appears at the bottom and sometimes a whole new green button appears a little shifted.
- The orange buy button at the top menu has too much padding, but I can't figure out how to make it smaller.

Support access is granted. :slight_smile: Thanks!!

  • Nastia

    Hello Meredith , I hope all is well!

    - Dark upper band/header on Home screen is very thick on mobile. It needs to be thinner.

    Just to be clear, do you meant the dark header with a site's logo?

    In that case to make it thinner, use the following CSS

    @media only screen and (max-width: 767px) {
         .container {
                height: 120px !important;
         }
    }

    If this is not the one header, please post here a screenshot of it.

    - I'm trying to make the play button on the slider (which is an image) change to green (a different image). It has a problem when you hover over it: a ghost edge

    It looks like a font-size value is too small, this why you see the image reflection bellow. Please use the following CSS code to hide it:

    #slide-5-layer-12.tp-caption.tp-resizeme {
        font-size: 30px;
    }

    The orange buy button at the top menu has too much padding, but I can't figure out how to make it smaller.

    To change the button padding use the bellow CSS code. By changing the 15px value, you will change the padding widths, and by changing the 30pc value, the height will be changed

    a.button_large .button_label {
        padding: 15px 30px;
    }

    Add the CSS to your theme CSS editor.

    I hope this will help!

    Cheers,
    Nastia

  • Meredith

    Hi Nastia,

    Thank you for your help. The CSS worked for the header, but the button I was referring to was the menu item that said BUY, not the button further down the page. It turns green when you hover over it.

    The CSS for the Play button image on the slider didn't seem to change that reflection, maybe because it is an image, not a button. I used CSS to make the whitish button/image show a greenish button/image on hover.

    Thanks, and sorry for not being more clear.

  • Sajid

    Hello Meredith,
    Hope you are doing good today :slight_smile:

    Yes, I can see it active now and could login. Here is the code to reduce the padding of Buy button in header.

    #Top_bar .menu > li > a span:not(.description) {
          padding: 0px 15px !important;
    }

    The dropdwon menu bg is not transparent to me on mobile. Could you please share the screenshot so I could see what exactly you are after ?

    Best Regards,
    Sajid

  • Sajid

    Hello Meredith,
    Hope you are doing good today :slight_smile:

    Here is the code to fix transparent navigation bg on mobile.

    @media only screen and (max-width: 767px){
    #Top_bar #menu {
        position: absolute !important;
    }
    }

    If that code does not work then you would need to remove following line of code from responsive.css file on nearly line number 593.

    position: static !important;

    Here is the code to fix the cart icon on mobile to stay on line.

    @media only screen and (max-width: 767px){
    .header-transparent #Top_bar .top_bar_right {
        top: 16px !important;
       float: right !important;
    }
    #Top_bar .top_bar_left{
        width: 75% !important;
       float: left !important;
    }
    }

    For button padding, try the code I posted above.

    Do you want to even reduce the padding ? If yes then feel free to adjust the numbers the first value is for top & right and the second value is for bottom & left.
    https://premium.wpmudev.org/forums/topic/2-little-tweaks-on-asite#post-1181218

    For the ghost edge on mouse over of play button. I think you need to use the hover image inline too as the one you are using already instead of as background. The reason is that, for desktop we can somehow make it come right under the existing one but it will cause serious issue on mobile devices.

    So, here is the path to go for this one. Add a second image for the button on same location with exact same settings. If you could add unique CSS classes to both images then please do, if no then no worries at all.

    Let me know once done and I will give you code to make hide the first one on hover and display the second one.

    Best Regards,
    Sajid

  • Sajid

    Hello Meredith :slight_smile:

    By adding inline image, I mean add the image where you have already added the image.

    But never mind, follow the steps below to fix this issue. This way, it will work smoothly on all screen sizes.

    1. Remove this code that you added for hover effect previously.

    .play:hover {
        background-image: url(http://ruumicup.com/wp-content/uploads/2016/11/watchvideobutto2.png);
        background-position: 0 0;
    }

    2. Now, insert following CSS code in your site.

    .play a:hover .video_lightbox_anchor_image {
        display: none;
    }
    .play a:hover .video_lightbox_anchor_image_hover {
        display: block;
    }
    img.video_lightbox_anchor_image_hover {
        display: none;
    }

    3. Finally, add the following code in functions.php file of your child theme or use it as mu-plugin.

    function wpmudev_insert_inline_image(){ ?>
    
    <script type="text/javascript">
    
    	jQuery(document).ready(function(){
    
    		jQuery('.video_lightbox_anchor_image').after('<img src="http://ruumicup.com/wp-content/uploads/2016/11/watchvideobutto2.png" class="video_lightbox_anchor_image_hover" alt="" style="width: 220px; height: 55px; transition: none; line-height: 22px; border-width: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; font-weight: 400; font-size: 20px;">');
    
    	});
    </script>
    
    <?php }
    add_action( 'wp_footer', 'wpmudev_insert_inline_image', 99);

    If you go with mu-plugin route then, go to your /wp-content/ folder via FTP, and find the folder called "mu-plugins". If there is no folder with that name, then you'll want to create one. Then, create a file inside that folder, and give the file any name you like and paste the code in there.

    You don't need to activate that plugin, as it will be always be automatically activated. Please be sure to add a PHP start tag at the beginning of the code if you insert this code as a mu-plugin, like this:

    <?php

    Hope that helps! Feel free to post a reply if you need further assistance :slight_smile:

    Best Regards,
    Sajid

  • Nastia

    Hello Meredith

    Please add the following CSS code to show the top bar when the menu is activated.

    @media only screen and (max-width: 768px) {
    #menu.menu-main-menu-container {
    	margin-top: 40px !important;
    }
    }

    Please note that I've used !important rule in the above code. I couldn't avoid it in this case.
    If you have already CSS code for #menu.menu-main-menu-container with margin-top I woud suggest edit teh value there.

    Otherwise use the above code as it is, but, in the future if you will require to modify this property again, you must edit the code above!

    Hope this will help!

    Cheers,
    Nastia