This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

how to make menu bar transparent in vantange theme

Open 12 replies customizationthemetheme-vantage
Dimpy Mody
9 years ago · Last reply by Dimpy Mody 8 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

12
  1. Andrew Misplon Staff 9 years, 1 month ago

    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. Alex S Staff 9 years, 29 days ago

    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. Dimpy Mody 9 years, 29 days ago

    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. Alex S Staff 9 years, 26 days ago

    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. Dimpy Mody 9 years, 26 days ago

    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. Alex S Staff 9 years, 24 days ago

    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. Dimpy Mody 9 years, 24 days ago

    hiii

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

  8. Dimpy Mody 9 years, 9 days ago

    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. Dimpy Mody 8 years, 8 months ago

    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. Andrew Misplon Staff 8 years, 8 months ago

    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. Dimpy Mody 8 years, 8 months ago

    Will this work to make my site mobile responsive??

    Pfa… In mobile everything is overlapping

  12. Dimpy Mody 8 years, 8 months ago

    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.

Have a different question or issue?

Start New Thread