Jump to content


Photo
Resolved

How can I make my Nav Bar Transparent

Nav Bar transparent

Best Answer robertomonteiro9 , 19 March 2013 - 02:34 AM

It worked for me! Thanks!

Go to the full post


  • Please log in to reply
9 replies to this topic

#1 censuspro

censuspro

    Advanced Member

  • Members
  • PipPipPip
  • 50 posts

Posted 16 October 2012 - 09:40 PM

Can anyone please tell me how I can make the Nav Bar transparent so it doesn't look so much like the apple website?

Thanks

#2 James B

James B

    Advocate

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

Posted 16 October 2012 - 10:30 PM

Hi there,

Do you mean completely transparent or more of a 'faded' effect. If you want it to vanish completely you can use css.

 
#nav {background:none;}

The bg to the navbar you're using is actually an image. So you could either create a new image using something like photoshop and upload or download the existing image, edit to suit and then re-upload.

#3 censuspro

censuspro

    Advanced Member

  • Members
  • PipPipPip
  • 50 posts

Posted 17 October 2012 - 07:16 PM

Hi there,

Do you mean completely transparent or more of a 'faded' effect. If you want it to vanish completely you can use css.

 
#nav {background:none;}

The bg to the navbar you're using is actually an image. So you could either create a new image using something like photoshop and upload or download the existing image, edit to suit and then re-upload.


Ideally I would just like to show the text and not the nav bar if possible.

#4 Rob

Rob

    One Smart Egg

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

Posted 18 October 2012 - 12:05 AM

Hi,

If you add the following code to Dashboard > PageLines > Site Options > Custom Code in CSS Rules, you'll see only the text links, the little home and the search bar. There will be black lines visible showing where the menu items break. However, we can eliminate those once you've implemented the following:
 
#nav {
    background: none repeat scroll 0 0 transparent;
    font-size: 13px;
    margin-bottom: 16px;
}

James, thank you for that. Yours was totally correct. It converted to the one I posted.

#5 dougbest

dougbest

    Newbie

  • Members
  • 2 posts

Posted 01 November 2012 - 10:35 AM

I'm also looking for a simple navbar with transparent background and no shadow. I've tried both of these - and other - solutions posted in the forum, but nothing has had any affect. A completely plain, text-only navbar seems to be a default choice that would be welcome, as well as a tool to create custom themes for the navbar, such as choosing background color, font color and size, rounded or square edges, shadow or no shadow, etc.

#6 catrina

catrina

    Advocate

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

Posted 01 November 2012 - 03:01 PM

@dougbest The CSS selectors may need to be slightly different (not sure which navigation bar you're using). Can you please post a link to your site?

#7 squarepenguin

squarepenguin

    Newbie

  • Members
  • Pip
  • 6 posts
  • Country: Country Flag

Posted 07 November 2012 - 04:57 PM

Hi,

I'd like to jump in on this one too. I have tried nearly every which way I can to get rid of the black background including all the instructions above and I have used Firebug to identify what i think are the correct CSS selectors but I still see a black navbar.

Link to my site is: http://squarepenguin.co.uk

Any help you can provide would be very welcome!

#8 squarepenguin

squarepenguin

    Newbie

  • Members
  • Pip
  • 6 posts
  • Country: Country Flag

Posted 07 November 2012 - 07:22 PM

I did it!

I went through Firebug again line by line and for some reason the second time it worked fine, and I managed to remove the box shadow too. I am using the default theme that comes with the Pagelines installation, I have no child themes or any of that as I am using the Pagelines 2.3 Framework.

So, if you want to remove the black background image, set the navbar colour to transparent and remove the navbar border, copy and paste this code into the Pagelines Customise Plugin (details of which can be found here: http://www.pagelines...ustomize_Plugin )



/* Make the navbar transparent, remove the background image, remove the navbar border */

.navbar.pl-color-black-trans {

background-color: transparent;

background-image: none;

border-top: none;

}



* NOTE *

To also remove the box shadow from the navbar to make it totally blend in with your background, paste the following code into the Pagelines Customise plugin.


/* Remove the box shadow from the Navbar */

.navbar {

box-shadow: none;

}



I hope this works for you too!

SquarePenguin
  • wonderwoman and dmgusa like this

#9 catrina

catrina

    Advocate

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

Posted 07 November 2012 - 08:47 PM

The topic was marked as resolved.

#10 robertomonteiro9

robertomonteiro9

    Newbie

  • Members
  • 2 posts
  • Country: Country Flag

Posted 19 March 2013 - 02:34 AM   Best Answer

It worked for me! Thanks!







Also tagged with one or more of these keywords: Resolved, Nav Bar, transparent