Jump to content
Sign in to follow this  
chules

How to make the Fixed Navbar have a translucent background

Recommended Posts

chules+    4
chules

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

  • Like 1

Share this post


Link to post
Share on other sites
batman    389
batman
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

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
chules+    4
chules
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
catrina    103
catrina
Try this instead: [code].navbar-content-pad, .navbar { background: transparent !important; }[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
chules+    4
chules
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
Rob    547
Rob
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?

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
chules+    4
chules
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
batman    389
batman
If you change "Page Background (Optional)" you can see the transparency NavBar on your page. ;)

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Rob    547
Rob
Good point Batman! Thanks for the insightful comment!

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
chules+    4
chules
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
Rob    547
Rob
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.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob
Can you enlighten me about how you have the header template structured? What's in there?

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
chules+    4
chules
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
batman    389
batman
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 :)

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
chules+    4
chules
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
chules+    4
chules
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
batman    389
batman
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. :)

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
chules+    4
chules
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
batman    389
batman
@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 ?

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
chules+    4
chules
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
batman    389
batman
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

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
batman    389
batman
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

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
chules+    4
chules
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
batman    389
batman
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 :)

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
batman    389
batman
I look the white bar...... I??m thinking ;)

Life is too short to remove USB safely ...

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  

×