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

Changing Nav Bar Background to an image

4 posts in this topic

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?




Share this post

Link to post
Share on other sites



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 -

Share this post

Link to post
Share on other sites

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

Please let us know how it goes.

Share this post

Link to post
Share on other sites

  • Similar Content

    • Image Align, Float
      By JudithKlinger+
      Using as the theme and for images inserted into a post, align="alignleft" is not working as expected. Image is aligning left, but not floating which it should be doing according to wp style.
    • Can we add a URL link to a Media Box image?
      By ipitts+
      We are using Pagelines >> DMS2 theme. We are using the DMS2 Media Box module on several pages throughout our site. The media box includes an image thumbnail with hyperlinked text (below the thumbnail - located in the embedded HTML text editor).  We would like for users to be able to click on the image in addition to the accompanying text. Is there a way to add a hyperlink on the image itself?
      Please see the attached screenshot. You'll see we have "Compatibility Matrix" thumbnail image & text within the "Text & Embedded HTML" section that provides an <a href="...."></a> to direct visitors to another page. 
      We tried to follow this post (, but it did not help us solve our challenge. 
      Thank you very much for your help,
      Marie Thiele
      Marketing Coordinator, Syn-Apps LLC
      media box.tiff
    • islider image uploade failed
      By brady
      can't upload images to the islider images are 2000 x 800 jpg. smaller than 2mbs. what else to i have to check?

    • Changing plugin text strings
      By Jeremiah+
      How do I find the correct Plugin text string and alter it without affecting updates?
    • Changing Salebar Font
      By tristanrodgers
      Hey there!
      Here is my website:
      I'd love to change the font of my salebar, can you tell me how to do that?
      Greetings from Germany,