Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Top Menu Panel Translucent / Transparent? Rate Topic   - - - - -

 
  • Fossils
  • Member
  • Members
  • Join Date: 18-Aug 16
  • 42 posts

Posted 25 October 2016 - 08:07 AM #1

I came across a neat feature on a site which froze the menu at the top of the site --- it is partially transparent / translucent to show stuff underneath the "sticky menu" at the top.

 

How would I turn this on or off in cs-cart multi-vendor and how would I set the level of transparency?

 

http://www.fallenhero.com/

 

I am curious to see how it would look for my site! 

Attached Thumbnails

  • Transparent-Menu.png


 
  • ak47
  • Member
  • Trial users
  • Join Date: 22-Oct 14
  • 45 posts

Posted 25 October 2016 - 08:21 AM #2

I came across a neat feature on a site which froze the menu at the top of the site --- it is partially transparent / translucent to show stuff underneath the "sticky menu" at the top.

 

How would I turn this on or off in cs-cart multi-vendor and how would I set the level of transparency?

 

http://www.fallenhero.com/

 

I am curious to see how it would look for my site! 

Try this css code
 

.navbar.navbar-default.navbar-fixed-top{
    background: rgba(240, 240, 240, 1);
}
Where value "1" - level of transparency 
Value "1" - 0% of transparency 
Value "0" - 100% of transparency 
Value "0,5" - 50% of transparency 


 
  • Fossils
  • Member
  • Members
  • Join Date: 18-Aug 16
  • 42 posts

Posted 25 October 2016 - 09:07 AM #3

 

Try this css code
 

.navbar.navbar-default.navbar-fixed-top{
    background: rgba(240, 240, 240, 1);
}
Where value "1" - level of transparency 
Value "1" - 0% of transparency 
Value "0" - 100% of transparency 
Value "0,5" - 50% of transparency 

 

 

Thanks for the quick response. I tried both 0,5 and 0.5 and it didn't seem to make any changes.

 

Maybe .navbar isn't what this is called on my site? A different variable?  http://fossils1.wwwls17.a2hosted.com/

 

.navbar.navbar-default.navbar-fixed-top{
    background: rgba(240, 240, 240, 0,5);
}
 
and
 
.navbar.navbar-default.navbar-fixed-top{
    background: rgba(240, 240, 240, 0.5);
}


 
  • ak47
  • Member
  • Trial users
  • Join Date: 22-Oct 14
  • 45 posts

Posted 25 October 2016 - 12:32 PM #4

 

Thanks for the quick response. I tried both 0,5 and 0.5 and it didn't seem to make any changes.

 

Maybe .navbar isn't what this is called on my site? A different variable?  http://fossils1.wwwls17.a2hosted.com/

 

.navbar.navbar-default.navbar-fixed-top{
    background: rgba(240, 240, 240, 0,5);
}
 
and
 
.navbar.navbar-default.navbar-fixed-top{
    background: rgba(240, 240, 240, 0.5);
}

 

Sorry. Wrong css selector. Try this 

.sticky-wrapper .tygh-top-panel{
    background: rgba(240, 240, 240, 0.5);
}


 
  • Fossils
  • Member
  • Members
  • Join Date: 18-Aug 16
  • 42 posts

Posted 25 October 2016 - 06:40 PM #5

Thanks! This worked brilliantly!  

 

I tried out a variety of transparency settings at with my current menu it becomes unreadable with transparency due to text being too light of color, but if I leave the CSS code there with it set to 1 for no transparency in case I decide to use it later after re-designing my menus, will it impact website performance?



 
  • Darius
  • Douchebag
  • Members
  • Join Date: 20-Apr 08
  • 3290 posts

Posted 26 October 2016 - 07:18 AM #6

Nice, what skin you use?



 
  • ak47
  • Member
  • Trial users
  • Join Date: 22-Oct 14
  • 45 posts

Posted 26 October 2016 - 07:22 AM #7

Thanks! This worked brilliantly!  

 

I tried out a variety of transparency settings at with my current menu it becomes unreadable with transparency due to text being too light of color, but if I leave the CSS code there with it set to 1 for no transparency in case I decide to use it later after re-designing my menus, will it impact website performance?

It will be work normal.