Jump to content
censuspro

How can I make my Nav Bar Transparent

Recommended Posts

censuspro    3
censuspro

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

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
censuspro    3
censuspro

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.

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
dougbest    0
dougbest

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.

Share this post


Link to post
Share on other sites
catrina    103
catrina

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


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
squarepenguin    2
squarepenguin

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!

Share this post


Link to post
Share on other sites
squarepenguin    2
squarepenguin

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

  • Like 2

Share this post


Link to post
Share on other sites
robertomonteiro9    0
robertomonteiro9

It worked for me! Thanks!

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


  • Similar Content

    • khat
      By khat+
      I think I may have installed pagelines pro incorrectly, and then used features incorrectly. I installed first platforms framework theme and then the child, thinking I could do setup for child later. I tried to set up a background image, and tried custom css feature in pagelines dashboard. I had mistakes in my css, and just thought that if I deleted the info in the css custom feature in pagelines dashboard that the new information would overwrite the old info. The background image didn't respond at all, probably because I didn't have the child directory renamed. I then tried to use the LSS plugin to create css and added more css, possibly, somewhere -sigh-. I never did change the background image and get it placed properly. I used a workaround and in nested containers I placed a background image which worked well enough, so I moved on to try to create my nav bar/ menu bar. When I go to the Menus panel, there is NO area where I can place a menu on a page. I have read and reread and re- re- reread the instructions for placing a menu. I've used the pagelines editor to place a menu, however only HOME shows up. I've been at this for many hours. I've since uninstalled all of my pagelines items and reinstalled, thinking that it would restore all my changes to default, but no, it is still all there, with all my unresolved issues. I am completely at a loss as to what to do next.
    • bnapoli
      By bnapoli+
      http://731.34b.myftpupload.com/ this website is using the NavPro navigation in Platform 5. It has a lot of menu items, so it breaks to two lines when the window is sized down. What is the media query to make the navigation either a) switch to "mobile mode" at a higher width, or b ) expand the nav into two lines. Thanks
    • yemoonyah
      By yemoonyah+
      I just installed and added the Flipper section to my home page and it makes my navigation/menu bar items disappear.
      They do show up again when scrolling down and everything seems normal on the other pages.
      http://yemoonyah.com
      Thanks.
       
    • jagipson
      By jagipson+
      I am trying to make a header like the following site: http://www.nd.edu/
      They have their logo with a blue and yellow bar. Above the blue bar its actually transparent. You can see the image underneath of the building. How can I accomplish this with the Fixed section on DMS? I just started the build here:  http://recruiterwebsitedesign.com/polymer/
      When I scroll down the bar in transparent but the top is white which looks like its the site wrap background. How can accomplish this?
       
      Thanks
    • ericbc
      By ericbc
      I have the WHP6 theme (not sure if I needed it). But heres my question....I want to change the font in the navigation bar and it doesn't give me that option. I also want to change the size of the nav bar (height).
×