Header and menu transparent on home page

Comments

• Pablo

  July 2018 edited July 2018

  Hi,

  Almost all of what you ask can be done with Custom CSS.

  Minimalist cannot be set only for few pages, sorry.

  
  

  This will make all your pages transparent, if you want make it only for
  

  Only Homepage, add before #Header a 'body.home'

  
  

  #Header #Top_bar{
  background:transparent !important;
  	box-shadow:0px 0px 0px !important;
  }

  Thanks
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• PrzemyslawGumulka

  July 2018

  Unfortunately, it doesn't work. As You can see on: https://niechzyja.psubraty.pl/, the slide on home page doesn't fit one page. When I set transparent header and transparent top bar with menu in muffin options, it fits perfectly (the progress bar on the botton is at the very bottom of the screen when scrolled up to the max)
• Pablo

  July 2018 edited July 2018

  You have to edit your slider, disable "falling" effect and turn off header minimalist to be able to make this effect works fine.

  The biggest problem makes this background effect

  Thanks.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• PrzemyslawGumulka

  July 2018

  ok
• Pablo

  July 2018

  Sorry, my answer was not quite helpful, I changed it to be more understandable.
  

  Cheers.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• PrzemyslawGumulka

  July 2018

  I have to come back to this problem. The answer from the 9.July doesn't work in my case. You suggested the following css:

  
  

  #Header #Top_bar{
  background:transparent !important;
  	box-shadow:0px 0px 0px !important;
  }

  
  I checked and it works in some header layouts, but not in "Classic". With this css, classic header layout and all the transparency options turned OFF in muffin menu - i get header in a color set in header colors in muffin menu. And a transparent sticky menu. That's exactly opossite to what I would like to get. I need transparent header on home page (but non-transparent sticky). And non-transparent on all other pages. When I change to (for example) fixed layout: header is fully transparent.
  
  I managed to get more or less what I need (example: https://niechzyja.psubraty.pl/) by using following options:

  
  

  - minimalist header ON

  - transparent header OFF

  - transparent top bar with menu ON

  - custom CSS:

  
  

  #Top_bar {

     opacity:1 !important;

  }

  
  

  body.main #Header #Top_bar{

     background:transparent !important;

     box-shadow:0px 0px 0px !important;

  }

  
  

  But one thing is still wrong. And it applies to standard betheme, without an costom css. Whenever you set transparent top bar with menu ON, the minimalist header doesn't work! Why is that? What's the connection between transparency and size of the header? I need the minimalist header, so please help me in one of two ways:

  
  

  either 1) fix custom css to make header (but not sticky) transparent in classic layout. Then I would be able to turn off top bar transparency and minimalist header should work again
  or 2) provide custom css to fix the minimalist header
  
  Here is how the header looks like currently (very high): https://ibb.co/hEQ3eJ
  Here is how it should look like (after turning top bar and menu transparency OFF): https://ibb.co/n4K1Yd
  
  It the top bar and transparency is not possible with minimalist header (but why?), it should be declared in this option description. There is only one note now: "Does not work with Header Below. Header Creative requires background image uploaded above."
• Pablo

  July 2018

  This Custom CSS will make your header a little bit shorter, what you wanted to achieve.

  .tr-menu.header-classic.minimalist-header:not(.template-slider) #Header{
  	min-height:90px !important;
  }

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• PrzemyslawGumulka

  July 2018

  it works, thank You. I really would like minimalist header independent from transparency options. Please, think about it.