Docs

[nikolasa]

Heya – just needing the CSS to help style the mobile menu. I’ve got the main site set up using a transparent header – but that is making the mobile header transparent too.

Any suggestions? Thanks!

[nikolasa]

This reply has been marked as private.

[John Ezra]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media (max-width:767px) {
    header.masthead.masthead-stacked, .x-logobar, .x-navbar-wrap, .x-navbar {
        background: #000!important;
        padding-bottom:20px;
    }
}

Hope this helps – thanks!

[nikolasa]

Hmmm, that didn’t quite work. I’ve added the css to the customiser… we have two licenses with you. The other site that code worked for but this site (maori.tech) didn’t work.

Hmmm… and suggestions please xo

[nikolasa]

This is what it still looks like

(´・ω・｀)

[Rupok]

Hi there,

I can’ see the suggested code on your site rather some other code with !important tag that forces it to be transparent. Make sure to add the code correctly and make all other codes are correct and there is no glitch (closed with curly braces).

Thanks

[nikolasa]

I was given THIS code to make the header transparent:

header.masthead.masthead-stacked, 
.x-logobar,
.x-navbar-wrap,
.x-navbar {
    background: transparent!important;
    box-shadow: none;
    border: none;
}

If I remove it – I get a strange white (attached)

I have added this in the global css settings

@media (max-width:767px) {
    header.masthead.masthead-stacked, .x-logobar, .x-navbar-wrap, .x-navbar {
        background: #000!important;
        padding-bottom:20px;
    }
}

But it is also on the home page.

ALSO – I’m getting that weird circle (which is the arrow that the menu uses) – don’t know how to remove it.

Yep I understand I have to close my code using } as well as ; at the end of each string. thanks.

[nikolasa]

Here is the screenshot

[nikolasa]

That circle thing is also in the upper top left of the screen.

[Nabeel A]

Hi again,

To fix scroll-bottom anchor:

.x-slider-scroll-bottom.left {
    left: 47% !important;
}
.x-slider-scroll-bottom.top {
    top: auto !important;
    bottom: 0 !important;
}

For the menu, please try adding the following code:

header.masthead.masthead-stacked, .x-logobar, .x-navbar-wrap, .x-navbar {
    position: absolute !important;
    width: 100% !important;
}

Let us know how this goes!

[nikolasa]

ok, i’m confused. I’ve got css within pages (via the custom css) in cornerstone. and i’ve got what seems to be the more global css – when you hit customizer > css.

This is what I’ve got via customizer:

h1, .h1 { 
  font-size: 60px; 
  color: #fff;
}

h2, .h2 { 
  font-size: 30px; 
  color: #4e1e9f;
}

h3, .h3 { 
  font-size: 30px; 
  color: #4e1e9f;
}

h4, .h4 { 
  font-size: 24px; 
  color: #211328;
}

h5, .h5 { 
  font-size: 18px; 
  color: #211328;
}

h6, .h6 {
  font-size 18px
  color: #fff;
}

.x-colophon {
    background-color:#3a3a3a !important;
    border-top: none; 
}

.x-colophon.bottom {
    padding: 10px 0;
    font-size: 10px;
    text-align: center;
    background-color: #202020 !important;
}

.x-colophon.top, .x-colophon.bottom {
    border-top: medium none;
    box-shadow: none;
  
@media (max-width:767px) {
    header.masthead.masthead-stacked, .x-logobar, .x-navbar-wrap, .x-navbar {
        background: #000 !important;
        padding-bottom:20px;
    }
}
  
  .x-colophon .widget {
    text-shadow: none;
}

.x-slider-scroll-bottom.left {
    left: 47% !important;
}
.x-slider-scroll-bottom.top {
    top: auto !important;
    bottom: 0 !important;
}
  
  header.masthead.masthead-stacked, .x-logobar, .x-navbar-wrap, .x-navbar {
    position: absolute !important;
    width: 100% !important;
}

I also have separate css styling on the two pages I’ve uploaded.

Homepage:

header.masthead.masthead-stacked, 
.x-logobar,
.x-navbar-wrap,
.x-navbar {
    background: transparent;
    box-shadow: none;
    border: none;
}

.x-slider-container.below {
    margin-top: -174px;
}

.page-id-5 blockquote {
    color: #fff;
  
@media (max-width:767px) {
    header.masthead.masthead-stacked, .x-logobar, .x-navbar-wrap, .x-navbar {
        background: #000!important;
        padding-bottom:20px;
    }
}
  
  .x-slider-scroll-bottom.left {
    left: 47% !important;
}
.x-slider-scroll-bottom.top {
    top: auto !important;
    bottom: 0 !important;
}
  
    .x-colophon .widget {
    text-shadow: none;
}
  
  .x-slider-scroll-bottom.left {
    left: 47% !important;
}
  
.x-slider-scroll-bottom.top {
    top: auto !important;
    bottom: 0 !important;
}

And Our Story

/*
No need for style tags here;
simply get started by writing
CSS! Watch as your changes
are reflected live in the
preview area. Have fun!
*/

.page-id-24 .x-navbar {
  border: none;
  box-shadow: none;
  
}

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0px;
}

img {
    width: 50%;
}

.page-id-24 .masthead {
    height: 0;
}

.dark {
  color: #fff;
  font-size: 18px;
}

.x-colophon .widget {
    text-shadow: none;
}

h6, .h6 {
  font-size 18px
  color: #fff;
}

I realise that I’m repeating code, but when I place it in the Customizer > CSS area, it doesn’t work (for instance the .widget css – only when I placed that within the Our Story page did I get any changes happening.

The mobile menu is still transparent when responsive to mobile.

THanks!!

OH the scroll anchor is code is not working either.

[Christopher]

Hi there,

Find this code :

.x-navbar {
    background-color: transparent;
}
.x-slider-container.below {
    margin-top: -174px;
}

And update it to :

@media (min-width:979px){
.x-navbar {
    background-color: transparent;
}
.x-slider-container.below {
    margin-top: -174px;
}
}

Add this in customizer :

.x-navbar .x-nav-wrap.mobile .x-nav > li > a {
    color: red;
}

Please let us know which CSS code doesn’t work in customizer?

Thanks.

[nikolasa]

Thanks for that, this changes the homepage header and removes the transparent header (but I wanted that to stay on the desktop version) it now works in mobile, but I can’t seem to change the colour. It does not work on the other page – Our Story though.

The code that is not working is the one to remove the text shadow. I’ve used this code on the Our Story page and it works but when I use it on the homepage, it doesn’t.

.x-colophon .widget {
    text-shadow: none;
}

[Paul R]

Hi,

1. To fix header in your homepage, add this in custom Edit Global css

.home header.masthead {
     width:100%;
     position:absolute;
     top:0;
}

2. To remove text shadow, you can try this code instead.

.x-colophon.top .widget {
	text-shadow: none !important;
}

Hope that helps.

[nikolasa]

Thank you both those codes worked.

I was given this code

@media (min-width:768px) {
    .x-column.x-md.x-1-3 {
        width: 22%
    }

    .x-column.x-md.x-1-3:first-child {
        width: 48%
    }
}}

To change the width of the footer widgets and it worked but not on the home page. Could you tell me if I have to add something else to make it work there?

[Author]

Posts