Modern Event Calendar - Single event and archive blocking top navigation

Support
#1

Hi there,

I am trying to implement the modern event calendar plug-in and I’m having problems on single events and archive pages. I have some custom global css that reduces the mast head to 0px and makes it transparent so that the background image on each page can be the nav’s background.

The problem is that on event pages and archive pages, those settings mean the page content is covering the top-nav and won’t allow me to add a background image.

Here is what a normal page looks like:

This is what an events page looks like. Note the lack of top margin and any background image:

How can I modify my custom CSS so that single event pages and the events archive has their own menu options?

#2

Hey @pointblankcreative,

Please give us the URLs of your event and archive pages. Basically, you will need to use the not pseudo CSS selector to exclude some selector to your rule.

Thanks.

#3

The URL for the archive page is: http://oceanambassadorscanada.org/events/

The individual event pages are all different, but here is the test one: http://oceanambassadorscanada.org/events/one-time-multiple-day-event/

Alternatively, if there is a way to only apply the transparent nav bar and masthead settings to all my other pages, I could do that as well. I only have 4 or 5 pages on my site that need that kind of nav bar.

Thanks.

#4

Hello There,

Thank you for the clarifications. To resolve your issue, please have your code updated and use this instead:

.page-template-template-blank-4 .masthead{
  height:0px;
}

This would make sure that only the pages using the Blank - No Container page template will have a header height of 0 pixels. The rest of the site will have the default header height.

Please let us know if this works out for you.

#6

Hi. Thanks, that worked. I also had to add code that added colour to the masthead since the menu elements are white and code to keep the rest of the pages transparent.

My only problem now is that the mobile version of the masthead no longer has a transparent black on it. (it was there to make the menu legible as a dropdown in mobile.)

For reference, here was my old custom CSS code:

.page-id-96 .x-breadcrumb-wrap {
display: none;
}
.x-navbar {
  background-color: transparent !important;
  border: 0;
}
.x-logobar{
  background-color: transparent !important;
}
.masthead {
height:0px;
}
body .x-navbar .x-navbar-inner {
    padding-top:45px;
}
.x-navbar {border-bottom-color: #ffffff !important; box-shadow: none !important;}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a, .x-navbar .desktop .sub-menu li > a:hover, .x-navbar .desktop .sub-menu li.x-active > a, .x-navbar .desktop .sub-menu li.current-menu-item > a, .x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, .x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav li.x-active > a, .x-navbar .mobile .x-nav li.current-menu-item > a {
    box-shadow: none;
}

.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
    box-shadow: none;
}
.x-navbar .desktop .x-nav > .current-menu-item > a{
color:rgb(0,62,77)
}
.x-navbar .desktop .x-nav > li > a:hover{
color:56b9e3;
}
.x-navbar .desktop .x-nav > .current-menu-item > a{
color:white
}  
h1 {
   margin-bottom: 0em !important;
}
h1 {
   margin-top: 0em !important;
}
h2 {
   margin-top: 0em !important;
}
h2 {
   margin-bottom: .5em !important;
}
h3 {
   margin-top: 0em !important;
}
h3 {
   margin-bottom: 0em !important;
}
h4 {
   margin-top: 0em !important;
}
h4 {
   margin-bottom: 0em !important;
}
h6 {
   margin-top: 0em !important;
}
h6 {
   margin-bottom: .5em !important;
}
.page-id-96 .x-navbar .x-brand { display: none; }

@media (max-width: 979px) {
  .x-navbar {
    background-color: rgba(0,0,0,0.7) !important;
}
.mec-single-modern .col-md-4 .mec-frontbox {
    margin-top: 200px !important;
}
.post-type-archive-mec-events #main-content {width:1200px; margin: 0 auto;}

And now the new code based on your recommendations:

.page-id-96 .x-breadcrumb-wrap {
display: none;
}
.x-navbar {
  background-color: rgb(0,62,77) !important;
  height:170px;
}
.page-template-template-blank-4 .x-navbar{
  height:238px;
}
.x-navbar {
  background-color: rgb(0,62,77) !important;
  border: 0;
}
.page-template-template-blank-4 .x-navbar{
  background-color: transparent !important;
  border: 0;
}
.x-logobar{
  background-color: transparent !important;
}
.page-template-template-blank-4 .masthead{
  height:0px;
}
body .x-navbar .x-navbar-inner {
    padding-top:45px;
}
.x-navbar {border-bottom-color: #ffffff !important; box-shadow: none !important;}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a, .x-navbar .desktop .sub-menu li > a:hover, .x-navbar .desktop .sub-menu li.x-active > a, .x-navbar .desktop .sub-menu li.current-menu-item > a, .x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, .x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav li.x-active > a, .x-navbar .mobile .x-nav li.current-menu-item > a {
    box-shadow: none;
}

.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
    box-shadow: none;
}
.x-navbar .desktop .x-nav > .current-menu-item > a{
color:rgb(0,62,77)
}
.x-navbar .desktop .x-nav > li > a:hover{
color:56b9e3;
}
.x-navbar .desktop .x-nav > .current-menu-item > a{
color:white
}  
h1 {
   margin-bottom: 0em !important;
}
h1 {
   margin-top: 0em !important;
}
h2 {
   margin-top: 0em !important;
}
h2 {
   margin-bottom: .5em !important;
}
h3 {
   margin-top: 0em !important;
}
h3 {
   margin-bottom: 0em !important;
}
h4 {
   margin-top: 0em !important;
}
h4 {
   margin-bottom: 0em !important;
}
h6 {
   margin-top: 0em !important;
}
h6 {
   margin-bottom: .5em !important;
}
.page-id-96 .x-navbar .x-brand { display: none; }

@media (max-width: 979px) {
  .x-navbar {
    background-color: rgba(0,0,0,0.7) !important;
}
.mec-single-modern .col-md-4 .mec-frontbox {
    margin-top: 200px !important;
}
.post-type-archive-mec-events #main-content {width:1200px; margin: 0 auto;}

How can I bring back the semi-transparent menu bar in mobile?

#7

Hello There,

Thanks for getting back to us. You will have to update your code and use this:

.page-id-96 .x-breadcrumb-wrap {
display: none;
}
.x-navbar {
  background-color: rgb(0,62,77) !important;
  height:170px;
}
.page-template-template-blank-4 .x-navbar{
  height:238px;
}
.x-navbar {
  background-color: rgb(0,62,77) !important;
  border: 0;
}
.page-template-template-blank-4 .x-navbar{
  background-color: transparent !important;
  border: 0;
}
.x-logobar{
  background-color: transparent !important;
}
.page-template-template-blank-4 .masthead{
  height:0px;
}
body .x-navbar .x-navbar-inner {
    padding-top:45px;
}
.x-navbar {border-bottom-color: #ffffff !important; box-shadow: none !important;}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a, .x-navbar .desktop .sub-menu li > a:hover, .x-navbar .desktop .sub-menu li.x-active > a, .x-navbar .desktop .sub-menu li.current-menu-item > a, .x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, .x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav li.x-active > a, .x-navbar .mobile .x-nav li.current-menu-item > a {
    box-shadow: none;
}

.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
    box-shadow: none;
}
.x-navbar .desktop .x-nav > .current-menu-item > a{
color:rgb(0,62,77)
}
.x-navbar .desktop .x-nav > li > a:hover{
color:56b9e3;
}
.x-navbar .desktop .x-nav > .current-menu-item > a{
color:white
}  
h1 {
   margin-bottom: 0em !important;
}
h1 {
   margin-top: 0em !important;
}
h2 {
   margin-top: 0em !important;
}
h2 {
   margin-bottom: .5em !important;
}
h3 {
   margin-top: 0em !important;
}
h3 {
   margin-bottom: 0em !important;
}
h4 {
   margin-top: 0em !important;
}
h4 {
   margin-bottom: 0em !important;
}
h6 {
   margin-top: 0em !important;
}
h6 {
   margin-bottom: .5em !important;
}
.page-id-96 .x-navbar .x-brand { display: none; }

.mec-single-modern .col-md-4 .mec-frontbox {
    margin-top: 200px !important;
}

.post-type-archive-mec-events #main-content {width:1200px; margin: 0 auto;}

@media (max-width: 979px) {
  .x-navbar,
  .page-template-template-blank-4 .x-navbar {
    background-color: rgba(0,0,0,0.7) !important;
  }
}

Please let us know how it goes.

#8

Unfortunately, it makes the masthead solid black and the dropdown is still without a background.

It needs to look like the top of this image, but instead looks like the bottom:

(I used the old code from the very beginning for the top image, before this set of changes related to the event calendar).

#9

Hi there,

It’s because of this existing CSS,

.x-navbar {
    background-color: rgb(0,62,77) !important;
    height: 170px;
}

I assume that it’s actually intended for desktop, so please change it to this

@media ( min-width: 980px ) {
.x-navbar {
    height: 170px;
}
}

.x-navbar {
    background-color: rgb(0,62,77) !important;
}

Thanks!

#10

Unfortunately, that didn’t change anything. The menu is still not showing up with the semi-transparent background once opened.

#11

And just to clarify, the issue is with the mobile site’s drop down menu. Desktop is fine.

#12

Hi there,

Unfortunately, I can not see the problem I checked the About page using my cell phone and here is the result:

Would you please kindly give us detailed information on how you want the menu to be so that we can be of a help?

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

#13

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