Docs

[Jayd K]

Hi there,

I love your theme and love Cornerstone! Just had a question and a suggestion, if you wouldn’t mind.

My Question: When making a website with an inline menu, I find it hard to have the mobile version ‘header’ behave in the way I would like it to. If the logo is wide, then when it hits the hamburger button the logo ‘dives down’ underneath it. I have tried all kinds of CSS to try and fix the issue, and am generally left not happy with the overall look. The logo always winds up being VERY small on mobile, and doesn’t reflect how the website looks on desktop. My ultimate question is – can I have an inline menu for the desktop version, but a stacked menu for the mobile version? I feel this way the logo could remain on the large side (instead of competing with the mobile button).

My Suggestion – For a future release of X, it would be really great to see mobile menu options in the Customiser for the way a website appears on mobile devices. For example, stacking the header/menu differently, resizing logo/x.brand image, changing heading font sizes across the site for mobile, how many columns show across for things like block grid etc. I feel that even though it can look good on mobile out of the box, I generally have to do a lot of customising to get it where I want to be.

Any help on this greatly appreciated!

[Christian]

Hey Jayd,

I’ll forward this as feature request. For now, you can do that using this CSS

@media (max-width: 979px) {
    .x-brand {
        text-align: center;
    }

    .masthead-inline .x-btn-navbar {
        float: none;
        clear: both;
        width: 85px;
        margin: 0 auto;
        position: relative;
        top: 10px;
    }
}

See attachment.

Thanks.

[Jayd K]

Hi there,

Thanks so much for passing on my request for the feature, much appreciated.

The CSS has nearly worked but not quite there.
The Navbar is not wide enough to contain it, and the logo isnt stretching across the screen.
I used the main body of the site from one of your templates, I think it was Agency.
Perhaps some of the custom code is conflicting?

/*
// Alternate row widths.
*/

.x-container.row-condensed {
  max-width: 800px;
}

.x-container.row-cta {
  max-width: 600px;
}

/*
// Swirls.
*/

.swirl {
  width: 100%;
  max-width: 250px;
}

/*
// CTA (page bottom).
*/

.section-cta {
  color: #fff;
}

.section-cta .swirl {
  display: block;
}

.section-cta .swirl.top {
  margin: 0 auto 40px;
}

.section-cta .h-custom-headline {
  margin: 0;
  color: currentColor;
}

.section-cta .x-text {
  margin: 0.5em 0 1.25em;
}

.section-cta .swirl.bottom {
  margin: 40px auto 0;
}

.x-btn-navbar:after {
    content: \' MENU\';
}

.x-topbar {
    text-align: right;
}
@media only screen and (min-width: 980px) {
  .masthead.masthead-inline {
    position: relative;
  }

  .x-topbar {
    background: transparent!important;
    position: absolute;
    width: 100%;
    right: 0;
  }
}

@media (max-width:580px){
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-size: 20px;
}
}

.single-post .entry-featured {
     display:none;
}

.blog .x-header-landmark { display: none; }

.x-blockquote {

font-size: 18px;

}

.x-btn-navbar:after {
    content: ' MENU';
}

@media (max-width: 979px) {
    .x-brand {
        text-align: center;
    }

    .masthead-inline .x-btn-navbar {
        float: none;
        clear: both;
        width: 85px;
        margin: 0 auto;
        position: relative;
        top: 10px;
    }
}

The URL is http://www.wmgbuilders.co.uk/

Many thanks!

[Jade]

Hi there,

The site seems to looks correct on mobile when I checked it since the logo area is displayed stacked already. See screenshot below. If you want to add a space below the mobile navigation, please update this code:

.masthead-inline .x-btn-navbar {
    float: none;
    clear: both;
    width: 85px;
    margin: 0 auto;
    position: relative;
    top: 10px;
}

to

.masthead-inline .x-btn-navbar {
    float: none;
    clear: both;
    width: 85px;
    margin: 0 auto;
    position: relative;
    top: 10px;
    margin-bottom: 20px;
}

[Jayd K]

Wow, thats perfect! Thanks so much! I think this will solve all of my mobile menus from now on, love the effect. Youre a diamond!

[Lely]

You’re welcome Jayd!

Cheers!

[Lely]

You’re welcome Jayd!

Cheers!

[Author]

Posts