Home>Support>how to make menu bar transparent in vantange theme

how to make menu bar transparent in vantange theme

By Dimpy Mody, 8 years ago. Last reply by Dimpy Mody, 8 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

i want to make menu transparent so that the image of the slider can be visible through the menu itself. what would be the css for the same so that i can modfy my existing site.
metroindustries.co.in

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    Hi Dimpy

    There is quite a bit to this request, it has come up in the past. You can try the snippet here: Thread: Transparent Menu bar and then also add the following:

    #main-slider {
	margin-top: -53px;
}
  2. 8 years, 5 months ago Alex S
    Hi, I Work Here

    Hi Dimpy,

    I personally recommend the following CSS to do this sort of thing. This CSS can be added to WP AdminAppearanceCustom CSS:

    .site-header {
	position: absolute;
	left: 0;
	right: 0;
}

.hgroup, .main-navigation {
	z-index: 400;
}

.main-navigation {
	background: none !important;
}

#main.site-main {
	padding: 0 35px !important
}

    You might also need to install the SiteOrigin CSS Editor.

  3. 8 years, 5 months ago Dimpy Mody

    hey alex
    the code worked wonders… thank alot for the support.. i finally got the look which i was searching for.
    is there a way i can personalize the sidebar of vantage theme.. its very basic and i want to modify using different colors

  4. 8 years, 5 months ago Alex S
    Hi, I Work Here

    Hi Dimpy,

    By default, the WordPress widget areas (ie. the sidebar) are really quite limited in terms of customization. If you’re after a few more options, I recommend using either CSS (specifically with the help SiteOrigin CSS as it’s a visual experience – give the getting started video a watch) or a Layout Builder, which is SiteOrigin Page Builder in widget form so that’ll allow you to create a more complex sidebar.

  5. 8 years, 5 months ago Dimpy Mody

    hi alex,

    i am already using siteorigin Css…but not sure about the exact code (css)
    for sidebar personalisation..as in the color and border color i will try using layout builder. hope that helps me..

  6. 8 years, 5 months ago Alex S
    Hi, I Work Here

    Hi Dimpy,

    I would recommend giving the SiteOrigin CSS Getting Started video a watch. SiteOrigin CSS is a visual CSS Editor and the visual mode will easily allow you to write that CSS.

  7. 8 years, 5 months ago Dimpy Mody

    hiii

    thanks alex.. i will site origin visual editor feature..i hope dat helps me..

  8. 8 years, 5 months ago Dimpy Mody

    hi andrew,

    as per ur guidance i managed to make the menu bar tranparent…but now the problem is there with the hover color… somehow its nt matching with transparent menu bar.. so by any way through CSS can i make hover color transparent???

  9. 8 years, 1 month ago Dimpy Mody

    hi ,

    how can this code be mobile responsive??? after using this css… my mobile site doesnt really seen to be attractive..
    menu bar is mobile is overriding the slider and slider size has been reduced as well ..

  10. 8 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    It would be best to revert to the default layout. You can do that by putting the Custom CSS inside of a media query so that it doesn’t apply to the mobile layout:

    @media (min-width: 780px) {
	
	.site-header {
		left: 0;
		position: absolute;
		right: 0;
	}

	.hgroup, .main-navigation {
		z-index: 400;
	}

	.main-navigation {
		background: none !important;
	}

	#main.site-main {
		padding: 0 35px !important
	}

}

    Remove the previous snippet and instead, add the one above.

  11. 8 years, 1 month ago Dimpy Mody

    Will this work to make my site mobile responsive??

    Pfa… In mobile everything is overlapping

  12. 8 years, 1 month ago Dimpy Mody

    hi andrew,

    i replaced the code…which solved the overlapping issue, now the site is mobile responsive.. But mobile menu bar is black and web one is transperant
    .
    i want to make mobile menu transperant as well… as its appearing on the web browser.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More