How to remove navigation bar background

You can remove the navigation bar background to make it completely transparent.

There are 2 types of navigation background: SOLID or SEMI-TRANSPARENT. First see which type of navigation background does your theme have!

Themes with SEMI-TRANSPARENT background

(Examples: Photobox, Framework & Muse)

For themes with already semi-transparent navigation background, changing it to completely transparent is as simple as uploading an image.

  1. Download the transparent image here: navbg
  2. Unzip the download file to access the navbg.png image file inside
  3. Log into your Weebly Builder
  4. Click into “design” then into “edit html/css
  5. Upload Image File from step1:


    1. Click on the GEAR icon on “ASSET” then click on “Upload File” to upload open upload window

    NEW Editor


    1.  Click on  “add new file(s)” to open upload window


  6. Save your change, exit the theme editor, and re-publish your site

Themes with SOLID background

(Examples: Drops, Habitu)

To change the navigation background to transparent for solid navigation background theme can be done in the theme code.

Step1: Open Theme Code Editor

  1. Log into your Weebly Builder
  2. Click into “design” then into “edit html/css
  3. Once in the code editor, we want to open the main_style.css page:

    NEW Editor

    OLD Editor

  4. Step2: Locate Navigation Bar code

    Depending on the theme you are using, the code many look different. In Main_style.css look for this code:

    [highligh].nav {
    background: url('navbg.jpg') 50% 50% repeat;[/highlight]
    height: auto;
    width: 100%;
    padding: 12px 0;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;

    The important thing to look for here is the code highlighted above.

    Step3: Change code

    Here change this:

    background: [highligh]url('navbg.jpg') 50% 50% repeat[/highlight]

    To this:

    background: [highligh]none !important[/highlight]

    Step4: Save your change, exit the theme editor, and re-publish your site

Tags: , , , ,