Jump to content

Archived

This topic is now archived and is closed to further replies.

njumara

Changing Nav Bar Background to an image

Recommended Posts

njumara    2
njumara

Hi guys,

 

I have a client that would like their main nav bar buttons to appear as though they were hanging off of a branch.

 

So far, I've got some graphics that don't look totally atrocious and here's the solution I've come up with, but am unsure how to execute:

 

1) How do I change the background of the nav bar to the graphic that I have created. I will save this graphic as an image and was thinking there's probably some way I could swap out the existing black box behind the nav bar for the image/graphic that I've created.

Anyone know how to do this?

 

2) Does anyone have a better idea?

 

Thanks!

Nick

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

Replacing the Navbars background color isn't a big issue, all you will need to do is override the default CSS, you can use the code below to get you started.

 

#site .navbar {
background-image: url(path to image);
}

 

However, you may need to include some additional styling, especially for responsiveness. I recommend you read though our override default CSS documentation here - http://docs.pagelines.com/customize/overriding-default-css


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
njumara    2
njumara

Hi Danny,

 

Thanks for the response. I will start with this code and see how it goes.

Share this post


Link to post
Share on other sites
Rob    547
Rob

Please let us know how it goes.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

  • Similar Content

    • BentleyD
      By BentleyD+
      Hey there,
       
      I am working on BentleyRolling.com. I used grams on MoonbodySoul.com and all the images are cropped to a square, whether they are square or 4:5 when posted on instagram, they still get cropped to a square. This looks way better than some being squares and some being 4:5. Did something change since I designed MoonBodySoul.com with Platform5? Can you help me crop all images to a square on BentleyRolling.com 
       
      All the best,
       
      Bentley
    • 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.
    • cstudio
      By cstudio
      How do I control the lightbox effect on the plugin "popthumbs"?  On mobile, it opens up much to small then when expanded it opens to large.  I would like to control the the lightbox to like 90% of the viewer window but I can't figure out how/where to control that.
      Site example

       
      Thx
    • 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
    • Queue-it
      By Queue-it+
      Hi,
      I am using pl-section-journey and hiding most of the images. When running the page via google speed insights, it tells to optimize all the images that are in this plugins default. (e.g. https://queue-it.com/wp-content/plugins/pl-section-journey/images/drawer-5.jpg ) Like this one that is not visible on the website, but is a part of the plugin and comes up in google insights.
      I've deleted all the images in the plugin, but they still seem to come up. Ref. this page: queue-it.com/features
×