Top Navigation Doesn't Align Left

Hi from sunny 22° C York UK :grinning:

On this page:
http://www.english-teacher-david.co.uk/blog/modal-verbs-restaurant.html
my hacking around with code trying to make a vanilla blog page has caused the top nav to drift to the right.

I need the top nav to look like is does on page:
http://www.english-teacher-david.co.uk

I fear I’ve chopped a bit of code out but my attempts to pinpoint what i need to patch in have been in vein.

So if an anyone out there can give be a tip on how to get the top horizontal nav to look as it does on page http://www.english-teacher-david.co.uk/ I’d be eternally grateful :slight_smile:

On that page, I only see the top nav if I enable JavaScript, which strikes me as a bigger issue than positioning.

On the other page, it may not be correctly positioned, but at least it’s there. Unfortunately, it doesn’t actually function without JavaScript … frown

1 Like

You can get it back to left aligned by adding this:

@media screen and (min-width: 992px) {
  .rd-navbar-wrap .rd-navbar-inner {
    text-align: left;
  }
  .rd-navbar-wrap .rd-navbar-static .rd-navbar-nav-wrap {
    display: block;
  }
  .rd-navbar-wrap .rd-navbar-inner .rd-navbar-brand .brand-name {
    font-size: 44px;
    line-height: 40px;
    font-weight: normal;
    vertical-align: top;
  }
  .rd-navbar-wrap .rd-navbar-panel .rd-navbar-brand .brand-logo .icon-xs {
    font-size: 48px;
    line-height: 52px;
    margin-right:10px;
  }
}

Which should make it look like this at wide screen.

You will probably also need to incorporate some of those styles into the smaller media queries.

2 Likes

Massive thank you, i’ll try this over the next few days & update back here :grinning:

Grazie mille :slight_smile: it now works.
http://www.english-teacher-david.co.uk/blog/modal-verbs-eating-out.html

CASE CLOSED

2 Likes