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

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

By AS Cahyono, 10 years ago. Last reply by Andrew Misplon, 10 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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 23 days ago AS Cahyono

    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. 10 years, 23 days ago AS Cahyono

    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. 10 years, 23 days ago AS Cahyono

    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. 10 years, 22 days ago Andrew Misplon
    Hi, I Work Here

    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. 10 years, 21 days ago AS Cahyono

    Thanks for your code sentence
    really appreciated

    best regard
    cahy

  6. 10 years, 21 days ago Andrew Misplon
    Hi, I Work Here

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More