Docs

[Christopher]

Hi there,

Please add this code :

.x-brand {
    position: relative;
    z-index: 99999;
}

Please edit topbar content and add pan mbn in section class field.

Hope it helps.

[Oliver V]

Hello!

Logo “clickable” is fixed now.

However, I don´t understant your last suggestion: “Please edit topbar content and add pan mbn in section class field.”This is what I have in my topbar content: Recibe GRATIS novedades

Additionally, I have seen that the first post is “half displayed”, probably because the nav bar is too low. Here you see the screen: http://prntscr.com/crnq8e

Let me know. Thanks!

Oliver

[Rad]

Hi there,

Please add this CSS as well, this should fix the two issue.

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
}
@media ( min-width: 768px ) {
  .x-topbar {
  min-height: 90px;
  }
  .x-topbar .x-section {
  margin: 0px !important;
  padding: 0px !important;
  float: right;
margin-top: 5px !important;
width: 70%;
  }
}

Hope this helps.

[Oliver V]

Hello!

Much, much better! Great. We only need to align now the top bar as you can see here: http://prntscr.com/cruo41

Thanks!

oliver

[Rad]

Hi there,

Please change that CSS to this,

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
}
@media ( min-width: 768px ) {
 .x-brand {
    margin-bottom: 10px;
    margin-top: 0px;
 }
  .x-topbar .x-section {
  margin: 0px !important;
  padding: 0px !important;
  float: right;
margin-top: 5px !important;
width: 70%;
  }
}

Cheers!

[Oliver V]

Hey!

Many many thanks!

Almost done! As you can see here http://prntscr.com/cs47nc we are almost there… The only thing we need to move is the “Recibe GRATIS novedades” fields which is located in the top bar content in the customizer.

Would it be maybe easier to add it in the _topbar.php we added before?

Thanks!

Oliver.

[Rupok]

Hi there,

Let’s add this as well within the media query :

.x-topbar .p-info {
  position: absolute;
  right: 450px;
  top: 10px;
}

That is the above code should be updated as below :

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
}
@media ( min-width: 768px ) {
 .x-brand {
    margin-bottom: 10px;
    margin-top: 0px;
 }
  .x-topbar .x-section {
  margin: 0px !important;
  padding: 0px !important;
  float: right;
margin-top: 5px !important;
width: 70%;
  }
.x-topbar .p-info {
  position: absolute;
  right: 450px;
  top: 10px;
}
}

Hope this helps.

[Oliver V]

GREAT!

Everything looks amazing now.

We only need to prepare the responsive view. As you can see here http://prntscr.com/cs90fd some work needs to be done.

In order to view it properply in mobile, I think we should have:

1. Line 1. Centered text: ¿Quieres recibir nuevas Ideas GRATIS?
2. Line 2, centered text too: Suscription form.
3. Line 3: Logo and line and underneath the Menu buttom from UberMenu.

Thankssssssss!!!

[Paul R]

Hi,

For 1,2 & 3

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 768px){
.x-topbar .p-info {
    text-align:center;
    position:static; 
    width: 100%;
}
.x-topbar .x-section {
    clear: both;
    width: 100%;
    float:none;
    overflow:hidden;
    text-align:center;
}

.x-navbar .x-brand {
    width: 100%;
    margin-top: 0;
    text-align:center;
}

.x-navbar-inner {
    float: none;
    clear: both;
    width: 100%;
    overflow: hidden;
    min-height: 60px;
}
}

Hope that helps.

[Oliver V]

Hello!

Many thanks! Much better.

However, I am missing the suscription form. See http://prntscr.com/cse8br And later have in the same line Logo and Menu Icon.

For your info, I have this code in my cusotomizer to reduce logo size en mobile view:

@media only screen and (max-width: 979px) {
.x-navbar .x-brand {
width: 150px;
}

Thanks!!!

Oliver.

[Christopher]

Hi there,

please find and remove this code:

.x-topbar {
    max-height: 70px;
}

Add this code :

.x-topbar-inner.x-container.max.width .x-section {
    padding: 0;
    margin-bottom: 0;
}

Hope it helps.

[Oliver V]

Hi!

The issue with the topbar is now solved!

Now, we only need to fix the logo and the Menu. See http://prntscr.com/csftkg

I think it would be a good idea to have in same line logo (smaller) and Menu. As well remove menu black line… Is it possible?

In addition, the menu doesn´t show the options. They are below the Featured post slider…

Thanks!!

Oliver.

[Lely]

Hi Oliver,

Please try this:

@media (max-width: 768px){
.x-brand img {
    width: 138px;
    float: left;
}
.ubermenu-skin-white {
    float: right;
    border-top: none;
    margin-top: -86px;
    border-bottom: none;
}
}

It also showing when I check. See attached screenshot.

[Oliver V]

Hello!

Styling now is perfect!

However, I have seen your attachment and the Menu is showed… Not in my case….

In mobile or PC, both cases, when I press the “Menu” is like pressing the logo. It reloads the page always, does not show the menu options…

Any idea?

Thanks!

Oliver.

[Nico]

Hi There,

Please try to add this in the custom CSS:

.ubermenu-responsive-toggle {
    padding: 25px 20px;
}

And before checking again, clear site and browser cache.

Let us know how it goes.

Thanks.

[Author]

Posts