Navbar covering top of posts page

Support
#1

I’ve tried a few CSS recommendations from other support posts, but can’t get the content on posts page to move down.

Help!?

Thanks

#2

Hi There,

Please find this custom CSS:

.masthead {
    position: absolute;
    width: 100%;
}

And change to this:

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

Let us know how it goes!

#3

perfect. thanks much!

#4

You’re most welcome.

#5

so, this fixed the blog issue, but changed the nav bar on pages. page navbar should be transparent

#6

Hi there,

Please do this instead:

update:

.single-post .masthead {
    position: relative;
    width: auto;
    background-color: #001937;
}

to

.blog.masthead,
.single-post .masthead {
    position: relative;
    width: auto;
    background-color: #001937;
}

Hope this helps.

#7

When you say ‘instead’ does that mean, revert the first recommendation and add your second recommendation? Or do I do both? I tried both, still not working as desired. Front blog page still covered by navbar. Here’s my masthead section

/*
// Masthead.
*/

.masthead {
position: absolute;
width: 100%;
}

.blog.masthead,
.single-post .masthead {
position: relative;
width: auto;
background-color: #001937;
}

/* original
.single-post .masthead {
position: relative;
width: auto;
background-color: #001937;
}*/

@media (max-width: 979px) {
.masthead {
position: relative;
width: auto;
background-color: #001937;
}
}

#8

Hi there,

My apologies, there should be a space between the blog and the masthead selector like this:

/*
// Masthead.
*/

.masthead {
  position: absolute;
  width: 100%;
}

.blog .masthead,
.single-post .masthead {
    position: relative;
    width: auto;
    background-color: #001937;
}

/* original
.single-post .masthead {
  position: relative;
  width: auto;
  background-color: #001937;
}*/

@media (max-width: 979px) {
  .masthead {
    position: relative;
    width: auto;
    background-color: #001937;
  }
}

Hope this helps.

#9

That did the trick. Thanks

Layout and sizing is good now, however our menu text is white, so the submenu text isn’t visible on the blog pages.

Last question - I’d like to enable the mobile nav button (hamburger) for specific page types (.tag, .category, .blog).

Thanks

#10

Hello There,

Thanks for updating in!

1.) So that the submenu is always visible, you can make use of this code:

.x-navbar .sub-menu {
    background-color: rgba(0,0,0,0.35) !important;
}

Please adjust the sub menu position by adjusting the “Navbar Top Height” in X > Launch > Options > Headers > Navbar. You will have to change it from 50 to 100.

2.) Please keep in mind that the mobile menu will only display and will only work in smaller screens. It will not be possible to desktop screens.

Hope this helps. Please let us know how it goes.

#11

Excellent recommendation. Resolved my issue. You guys rock!

#12

You’re most welcome.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.