Jump to content


Photo
- - - - -

How to make the Fixed Navbar have a translucent background


  • Please log in to reply
28 replies to this topic

#1 chules

chules

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 30 June 2012 - 12:34 PM

I am working on a site at http://108.166.90.150/ and trying to use the fixed navbar. We wish to remove the background image completely and just have a translucent background. This effect would just have the links display on the header without any bar that displays across the site. Any suggestions on how to do this? Thank you - chules
  • assomibatrifs likes this

#2 batman

batman

    Bat Learning

  • Members

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

Posted 30 June 2012 - 01:06 PM

You can try this in your CSS
in
Pagelines > Custome Code > CSS Rule
add

 .navbar-content-pad, .navbar { background: transparent; }

I hope you serve

#3 chules

chules

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 30 June 2012 - 02:46 PM

Thank you for the assistance. I tried the code above and what this does in Firefox and Safari is change the bar to a white background. In my navbar control panel I have no theme selected. It would be a nice feature if we could have a theme option for translucent. This way what it would do is display menu links on a graphical header great. Thank you - chules

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 30 June 2012 - 03:30 PM

Try this instead:

 .navbar-content-pad, .navbar { background: transparent !important; }


#5 chules

chules

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 30 June 2012 - 10:20 PM

Catrina, I added the code and still no change. Thank you for the assistance - chules

#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 30 June 2012 - 10:29 PM

Transparency or translucency requires something in the background, be it a color or an image. The menu is overlaying the site background. What is the site background color, as set up in Color Control?

#7 chules

chules

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 30 June 2012 - 10:41 PM

In color control there is nothing typed in Body, Page or Content Background boxes. I would imagine though it must be white as that is what the color control box show. Thank you - chules

#8 batman

batman

    Bat Learning

  • Members

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

Posted 30 June 2012 - 10:45 PM

If you change "Page Background (Optional)" you can see the transparency NavBar on your page. ;)

#9 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 30 June 2012 - 10:47 PM

Good point Batman! Thanks for the insightful comment!

#10 chules

chules

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 30 June 2012 - 11:11 PM

I'm not sure I understand this. What I am trying to do is have the links display directly on my header image. No background or border? Thank you chules

#11 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 30 June 2012 - 11:50 PM

Chules, At present, the background in the navbar is actually transparent. That's why you're seeing white. The menu is not sitting as a layer over the background image. It's sitting above the background image. So, we need to do two things. Go do Dashboard > PageLines > Site Options > Color Control and make sure the vertical position of the background is 0. Also, make sure in Custom Code > CSS Rules, the first line is the following, replacing body {}
 body { padding-top:0px; }

Next, if the background doesn't move up, underneath the navbar, we're going to apply some CSS to do it. But let's check those settings first.

#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 30 June 2012 - 11:56 PM

Can you enlighten me about how you have the header template structured? What's in there?

#13 chules

chules

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 01 July 2012 - 12:07 AM

I made those changes on the site. I really just have a header image uploaded. Before the 2.2 release I wast trying to simply put some links at the top of my site that lay on top the header. I thought it to be a good way to try and place a horizontal menu at the top of the site. I'm not sure this is going to work this way. If I wanted to place links at the top right of my site what would be a better solution for this? Thank you chules

#14 batman

batman

    Bat Learning

  • Members

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

Posted 01 July 2012 - 12:48 AM

I believe to place links at the top right of your site the NavBar is a better solution

Please chules try with:

Enable Fixed Navigation Bar

Copy this code in CSS Rule
 .navbar-content-pad, .navbar { background: transparent; }
	body.navbar_fixed .page-canvas { padding-top:0px; }
	.navbar {box-shadow:none;}

To see if you like the solution of the NavBar
:)

#15 chules

chules

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 01 July 2012 - 01:32 AM

Batman, I tried this code and it didn't fix the issue. I also noticed that while the fixed navbar is white on firefox and safari on ie it displays black. I guess I'm going to have to try to do this manually using functions.php somehow. Thank you for the assistance! chules

#16 chules

chules

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 01 July 2012 - 01:42 AM

I removed the following code from my custom css
 /* This fixes the navbar to the top of the site */
	.section-navbar.fixed-top {
	    position: static;
	}
If you use firefox or safari and view my site at http://108.166.90.150/ you can see what I am trying to do with the fixed nav bar. It is displaying without the background. However, if I fix the navbar to the top of the site with the code above the white bar will return. If I can keep this look and lock the fixednav bar so the menu items wont scroll down the page it would work. With IE it's an entirely different story as I have no idea where the black background is coming from.

Thank you - chules

#17 batman

batman

    Bat Learning

  • Members

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

Posted 01 July 2012 - 02:02 AM

Hi @chules I see your NavBar, I like it. I note the code the removed code. I??m a newbie try to learn helping. I use a Mac so the problem with IE it is not for me, I can not help you. :)

#18 chules

chules

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 01 July 2012 - 02:36 AM

Any idea why the code I referenced above would change my navbar from how it's appearing on the site now to having a white background? Thank you - chules

#19 batman

batman

    Bat Learning

  • Members

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

Posted 01 July 2012 - 02:57 AM

@chules I saw with Safari, Firefox, Chrome the background transparent.

Posted Image

Your question is for IE ?

#20 chules

chules

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 01 July 2012 - 03:04 AM

I need to address IE but I'm first trying to find out how I can stop this fix navbar from scrolling. For example if you scroll down a page you will notice the fixnavbar items scroll with you and they appear within articles, images, etc. I am trying to fix the position to the top of the site. When you read an article the fixednav bar should stay at the top of the page with the header. I wish to lock the navbar at the top of the header just where it is now.