Help with the menu and header

Hi, I have tried using solutions I have seen in other posts and none has worked. I hope you can give me a hand in figuring this out.

1- I need to make the desktop menu white at all times without affecting the header image. Not plain white but with a slight transparency, just as it appears when you scroll down in the website. With the current photo and settings the menu cannot be seen.

2- I ned to have the menut disappear whenever the user stops scrolling down so as not to overlap with the content. It did this before and now it doesn’t. It just sticks there.

3- I need to change the width of the menu for the mobile version. It is way too thick

Can you pls help me? My site is http://www.inversa.uy

Thanks

Hello there,

> 1

Try adding this extra CSS code to Appearance > Customize > Additional CSS from your site dashboard.


@media only screen and (min-width:1025px) {
  
  .site-header {
    background-color: rgba(255,255,255,0.9);
  }  
  
}

> 2

Please try doing these steps.

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

  if ( matchMedia( 'only screen and (min-width: 1025px)' ).matches ) {  
    
    var previousScroll = 500;
    $(window).on('load scroll', function(event) {
    
       var scroll = $(this).scrollTop();
       
       if (scroll > previousScroll){
       
           clearTimeout($.data(this, 'scrollTimer'));
           $.data(this, 'scrollTimer', setTimeout(function() {

               $('.site-header.float-header').animate({
                'top': '-80px'
               }, 70);
               
           }, 250));
           
       } else {
       
          $('.site-header.float-header').animate({
           'top': '0px'
          }, 20);
          
       }
       
       previousScroll = scroll;
       
    });

  }

})(jQuery);


  1. Update

> 3

Please add this additional CSS code:


@media only screen and (max-width:1024px) {
  
  .site-header {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  .site-logo {
    max-height: 70px;
  }
  
}

Regards,
Kharis

Thanks!! It all worked perfectly!

One last thing:

How can I reduce the thickness of the header menu? I want it to have the same thickness as when it appears when you scroll down.

Or even thinner still. Where do I regulate that?

Hello there,

Please try adding this CSS code:


.site-header {
    padding-top: 5px;
    padding-bottom: 5px;
}

Regards,
Kharis

Thanks! Worked perfectly. Last question! How can I reduce the thickness of the footer widget area??

Hello there,

You can use this CSS code:


.footer-widgets {
  padding-top: 20px;
  padding-bottom: 20px;
}

.footer-widgets.widget-area .widget {
  margin-bottom: 0;
}

Regards,
Kharis

Thank you Kharis. I added that but nothing changed this time. Any suggestions?

Hello there,

Please try this one:


.footer-widgets {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.footer-widgets.widget-area .widget {
  margin-bottom: 0 !important; 
}

If it does nothing, your custom CSS code might contain an error line. The easiest way to check it is to validate it with this tool: https://jigsaw.w3.org/css-validator/#validate_by_input

Regards,
Kharis

Kharis, I changed sth else and could fix it. So thank you

Again with the footer… Is there a way to change the orientation of the title of footer widget 3? I want it to be aligned with the social icons below. You can check www.inversa.uy

thanks!

Hello there,

Please try adding this extra CSS code:


.footer-widgets .social-menu-widget {
  margin-left: 0;
} 

Then edit your site logo image so that it doesn’t have left and right spaces, then reupload it.

Regards,
Kharis

Hi Kharis, I did that but it still isn’t what we need. We have it aligned now which is great. Now we need to move the whole thing more to the right to balance out the entire footer. Ideally, it would be aligned to the JN in the upper row.

Thanks again!!

Hello there,

Please try adding this extra CSS code:


@media only screen and (min-width:992px) {
  
  
  .footer-widgets .sidebar-column.col-md-4:last-child {
    text-align: right;
  }
  
  .footer-widgets .sidebar-column.col-md-4:last-child .social-menu-widget {
    float: right;
  }
  
  .footer-widgets .sidebar-column.col-md-4:last-child .social-menu-widget li:last-child {
    padding-right: 0; 
  }  
  
}

Regards,
Kharis

Kharis,

Don’t hate me but it still isn’t what we need. I did modify the code to try and avoid contacting you again! It’s almost done. The social icons are where they need to be in terms of padding. I need to align the text now which remains far too right.

This is what I did:

@media only screen and (min-width:992px) {

.footer-widgets .sidebar-column.col-md-4:last-child {
text-align: right;
}

.footer-widgets .sidebar-column.col-md-4:last-child .social-menu-widget {
float: right;
}

.footer-widgets .sidebar-column.col-md-4:last-child .social-menu-widget li:last-child {
padding-right:90px;
}

.footer-widgets .sidebar-column.col-md-4:last-child
{
padding-right:70px;
}
}

So the icon position is fine now? And you want the social heading text to be left aligned – vertically in one line to the Twitter icon?

Could you please take a screenshot with some annotations to help me easier understand it? For the image file, upload it to cloudup.com service, and then share its link here.

Regards,
Kharis

Yes, that is what we need. I tried uploading that and couldn’t. You can check the web page www.inversa.uy

thanks

Hello there,

Please try adding this extra CSS code:


#fp_social-9 .widget-title {
  text-align: left;
}

@media only screen and (min-width:992px) {
  #fp_social-9 .widget-title {
    margin-left: 52px;
  }  
}

@media only screen and (min-width:1200px) {
  #fp_social-9 .widget-title {
    text-align: center;
    margin-left: 28px;
  }  
}

Regards,
Kharis

yes! THANKS!! no more questions!