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.

Is it possible making no main nav background (default) on style.css ?

Resolved 6 replies premiumthemetheme-vantage
AS Cahyono
11 years ago · Last reply by Andrew Misplon 11 years ago

I want to customize my main nav. background with no color.
so website background would be made main nav. background.
but when it’s became sticky (when scrolling), there’s RGBa color on main nav. Then when it’s back to the top menu color dissepeared again.
I want to my metaslider or some big image as look like header, with logo and main navigation above it.
I’ve tried some tweak on custom css, but there’s no effect.
and I think it because there’s default color for main navigation on style.css.
is it possible to remove it ?, or maybe there’s some way to customize it’s through custom css ?
any suggestion would be appreciated.

kind regards
cahy

URL: http://www.dutaflow.co.id

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

6
  1. AS Cahyono 11 years, 6 months ago

    I’ve tried through custom css :

    .main-navigation {
  background: {display:none}
}

    but there’s color

    I’ve tried remove from style.css
    but no effect.

  2. AS Cahyono 11 years, 6 months ago

    So from elemen header masthead

    header#masthead.masthead-logo-in-menu .background {
   background: {display:none};
 }

    it’s won’t work (there’s color background)

  3. AS Cahyono 11 years, 6 months ago

    After make some tweak trial and error, I’ve got what I want
    as I mentioned above.
    I just want to share here, what I did on Custom CSS :

    /*….. for centering menu and get lower to bottom …*/
.main-navigation ul {
text-align: center;
padding-top: 65px;
}
/* .. make bigger logo on header masthead logo in menu than default on style.css 35px ..*/
header#masthead.masthead-logo-in-menu .logo > img {
max-height: 100px;
width: auto; 
}
/*.. change dimension of search icon and box search ..*/
#search-icon #search-icon-icon {
box-sizing: border-box;
position: relative;
display: block;
cursor: pointer;
background-color: #303134;
width: 75px;
height: 30px;
}
/*… new position …*/
#search-icon {
  top: 60px;
}
/*..... Centering logo on small device ...*/
@media (max-width: 1080px){
body.responsive header#masthead.masthead-logo-in-menu .logo {
margin-left: 145px;
}
}
/* .. tweak when scrolling/sticky …*/
header#masthead {
  background: display: none;
}
header#masthead.masthead-logo-in-menu .background{
display:none;
}
.main-navigation {
  background: display:none;
  }
.main-navigation.sticky {
background: rgba(153, 116, 46, 0.9) !important; 
}
.main-navigation.sticky ul {
text-align: center;
padding-top: 35px;
}
.main-navigation.sticky #search-icon {
  top: 30px;
}

    you can take look at: http://www.dutaflow.co.id

    As long as I tried I couldn’t find a way how to resize logo into smaller than 100px when menu on sticky/scrolling.
    any suggestions ?

    kind regards
    cahy

  4. Andrew Misplon Staff 11 years, 6 months ago

    Hi Cahy

    Really glad to see you’ve been making progress with this customisation.

    You could try something like this to target the logo size when in sticky menu only:

    header#masthead.masthead-logo-in-menu .sticky .logo > img {
max-height: 35px;
}
  5. AS Cahyono 11 years, 6 months ago

    Thanks for your code sentence
    really appreciated

    best regard
    cahy

  6. Andrew Misplon Staff 11 years, 6 months ago

    For sure!

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