Resolved How can I make my Nav Bar Transparent

[censuspro 3]

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

[James B 436]

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.

[censuspro 3]

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.

[Rob 547]

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.

[dougbest 0]

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.

[catrina 103]

@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?

[squarepenguin 2]

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!

[squarepenguin 2]

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.com/wiki/How_to_Use_the_PageLines_Customize_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

[catrina 103]

The topic was marked as resolved.

[robertomonteiro9 0]

It worked for me! Thanks!