Sign in to follow this  
Followers 0

How to make the Fixed Navbar have a translucent background

29 posts in this topic

Posted · Report post

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

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

You can try this in your CSS in Pagelines > Custome Code > CSS Rule add [code].navbar-content-pad, .navbar { background: transparent; }[/code] I hope you serve

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

Try this instead: [code].navbar-content-pad, .navbar { background: transparent !important; }[/code]

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

Good point Batman! Thanks for the insightful comment!

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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 {} [code]body { padding-top:0px; }[/code] 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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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 [code].navbar-content-pad, .navbar { background: transparent; } body.navbar_fixed .page-canvas { padding-top:0px; } .navbar {box-shadow:none;}[/code] To see if you like the solution of the NavBar :)

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

I removed the following code from my custom css [code]/* This fixes the navbar to the top of the site */ .section-navbar.fixed-top { position: static; }[/code] 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

Share this post


Link to post
Share on other sites

Posted · Report post

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. :)

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

@chules I saw with Safari, Firefox, Chrome the background transparent. [img]https://lh6.googleusercontent.com/-qt3kUqVknCs/T--72fg1p5I/AAAAAAAAKs0/S2E7R797xNU/s800/Captura%2520de%2520pantalla%25202012-06-30%2520a%2520la%2528s%2529%252023.52.13.jpg[/img] Your question is for IE ?

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

OK @chules I write in my CSS rules [code].section-navbar.fixed-top {position: static;}[/code] and stop this fix bar from scrolling in Safari, Chrome, Firefox

Share this post


Link to post
Share on other sites

Posted · Report post

with this code [code].navbar-content-pad, .navbar { background: transparent; } body.navbar_fixed .page-canvas { padding-top:0px; } .navbar {box-shadow:none;} [/code] NavBar in my blog test is like yours

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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 [code].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); } [/code] Excuse my English, I??m from Argentina :)

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0