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.
- Download the transparent image here: navbg
- Unzip the download file to access the navbg.png image file inside
- Log into your Weebly Builder
- Click into “design” then into “edit html/css“
- Upload Image File from step1:
NEW EDITOR
1. Click on the GEAR icon on “ASSET” then click on “Upload File” to upload open upload window
OLD EDITOR
1. Click on “add new file(s)” to open upload window
- 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
- Log into your Weebly Builder
- Click into “design” then into “edit html/css“
- Once in the code editor, we want to open the main_style.css page:
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