Jump to content


Photo
- - - - -

How to make the Fixed Navbar have a translucent background


  • Please log in to reply
28 replies to this topic

#21 batman

batman

    Bat Learning

  • Members

  • 1995 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 01 July 2012 - 03:10 AM

OK @chules

I write in my CSS rules
 .section-navbar.fixed-top {position: static;}

and stop this fix bar from scrolling in Safari, Chrome, Firefox

#22 batman

batman

    Bat Learning

  • Members

  • 1995 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 01 July 2012 - 03:13 AM

with this code

 .navbar-content-pad, .navbar { background: transparent; }
	body.navbar_fixed .page-canvas { padding-top:0px; }
	.navbar {box-shadow:none;}

NavBar in my blog test is like yours

#23 chules

chules

    Super Member

  • Members

  • 146 posts
  • Country: Country Flag

Posted 01 July 2012 - 03:20 AM

I just added the code. Take a look at the site and you will see the white bar return? Thank you for the assistance - chules

#24 batman

batman

    Bat Learning

  • Members

  • 1995 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 01 July 2012 - 03:25 AM

For IE problems...
"Not all CSS is compatible in all browsers", said mi @catrina
@WebWerx help me ....
"You will need to add some code that recognizes the various browsers available. This will be of great help: http://www.css3.me/"

for example transparency is

 .navbar-content-pad, .navbar {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = 'transparent', endColorstr = 'transparent');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = 'transparent', endColorstr = 'transparent')";
	/*Element must have a height (not auto)*/
	/*All filters must be placed together*/
	background-image: -moz-linear-gradient(top, transparent, transparent);
	background-image: -ms-linear-gradient(top, transparent, transparent);
	background-image: -o-linear-gradient(top, transparent, transparent);
	background-image: -webkit-gradient(linear, center top, center bottom, from(transparent), to(transparent));
	background-image: -webkit-linear-gradient(top, transparent, transparent);
	background-image: linear-gradient(top, transparent, transparent);
	}

Excuse my English, I??m from Argentina
:)

#25 batman

batman

    Bat Learning

  • Members

  • 1995 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 01 July 2012 - 03:28 AM

I look the white bar...... I??m thinking ;)

#26 chules

chules

    Super Member

  • Members

  • 146 posts
  • Country: Country Flag

Posted 01 July 2012 - 03:36 AM

I'm going to try and use functions.php for this instead of fixed navbar. I'm closing this ticket. Thank you for the assistance! chules

#27 batman

batman

    Bat Learning

  • Members

  • 1995 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 01 July 2012 - 03:39 AM

OK I Hope you can do it Regards

#28 DanatTLFN

DanatTLFN

    Member

  • Members

  • 21 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 20 January 2014 - 07:17 PM

The first line of code posted in this topic is really helpful for changing my main Nav-bar to black. However, was really hoping to change my fixed Navbar  black(transparent) to Black (Opaque) if thats possible.

 

How can I alter the opacity of my fixed Nav-bar to completely opaque?

 

Hope to hear from you soon. 

 

Example of Current Site: http://www.thelocalfilmnetwork.com/


Edited by DanatTLFN, 20 January 2014 - 07:27 PM.


#29 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 21 January 2014 - 01:40 AM

Hi there, you will need to change the background image to :none in the css to remove the gradient. Then apply the background-color:#000000 to give you a solid black navbar

 

.navbar.pl-color-black-trans {
    background-color: #000000;
    background-image: none;
    background-repeat: repeat-x;
    border-top: 1px solid rgba(0, 0, 0, 0.9);
}