terrathemes

@raftingspot,

thank you for your detailed explanation.

Am I correct that you wrote your texts in an document writer like Word and pasted this into the WordPress editor? All the texts that aren’t changing properly are wrapped inside of span-tags which have an inline style that sets the font size to 12 px.

If that is the case, you should paste in the texts of all the pages again. Here is an instruction on how to paste them in correctly so that they aren’t formatted anymore.

@raftingspot,

small typo on width but I eventually figured it out).

you’re right, I misspelled it. Unfortunately I can’t edit the post anymore but I’m glad you found it.

Is there a way to increase this space?

You can increase the line height with this code:

#mobile-menu ul li a {
  line-height: 1.3;
}

Maybe you have to adjust the dropdown arrows with this, depending on your final font size. 45px is the default value.

.btn-submenu {
  line-height: 45px;
}

Once again, thank you for your time and I’m really liking your theme so far (and the quick support).

You’re welcome. If you don’t mind I would really appreciate your feedback at Meteorites review section.

@raftingspot,

Second layout
Since you’re using the boxed layout with quite a lot and long menu items as well as the search icon, the menu is dropping to two rows on displays below 1200px width.

If it’s okay to have two rows, you could make the spacing smaller with this CSS (another solution down below unter Your question:

.nav-container #main-nav > ul > li > a, 
.nav-container #main-nav .search-wrapper i {
  padding: 10px 0;
}
.nav-container.floated.fixed #main-nav > ul > li > a, 
.nav-container.floated.fixed #main-nav .search-wrapper i {
  padding: 5px 0;
}

You could also turn off the option through the customizer that decreases the navigation bar height after scrolling a bit, since the navigation bar is already smaller with this.
Another option would be to use the padding reduction only for screen sizes between 1200px and 1024px where the two rows appear. Or you could make the spacing between the menu items smaller and hope that it fits the boxed layout.

Third layout
You’re right with the discussion whether there has to be layout three when there is layout four.
This happens from 1024px to 992px. For example iPads in landscape mode often have 1024px width. Since there is no hover on this devices a normal menu wouldn’t be optimal. That’s why the navicon (the three bars) are there. However since some monitors are still just 1024px width (if one can trust this statistic, about 3% out there), the behaviour of the navigation bar and header image is still the same.

Your question
To have the first layout for screen sizes with the second layout you could try this CSS to reduce the left and right space between the menu items:

#main-nav ul li {
  padding: 0 6px;
}

or to apply it only for these screen sizes with the two rows:

@media only screen and (max-width: 1200px) {
  #main-nav ul li {
    padding: 0 6px;
  }
}

To remove the third layout and get the fourth behaviour earlier use this CSS:

@media only screen and (max-with: 1024px) {
  .has-header #masthead.above:not(.above-solid) .topbar, 
  .has-header #masthead.above:not(.above-solid) .nav-container,
  .nav-container {
    background-color: #353535 !important;
  }
}

Please let me know if this is what you’re looking for and provide some feedback whether you need some more assistant with this.

Let me know and thank you for your time.

You’re welcome.

Hi @raftingspot,

you said changing the font sizes through the customizer isn’t working for all sites – on which pages and sections doesn’t this work properly?

1) I’ve never used this plugin, therefore I can’t surely say it belongs together. However if you turned it off and it’s still not working, it shouldn’t because of the plugin.

2) Let me inspect your sites before you remake them all. As I said above I need to know which pages are affected, which sections you mean and what font size you want them to be. Then I can try to find the reason why it isn’t working properly.

3) As mentioned in 2, I need to take a look at the sections. Otherwhise I can’t really think of any reasons.

@raftingspot,

I tested your issue with the large white space after scrolling just some pixel. The fix I tried out is causing some bad behaviour in other scenarios, therefore I won’t implement it in the next update.

The white space appears because if you scroll just some pixel, the navigation bar gets smaller with a transition of 300ms. If you scroll up, the height changes with the transition again, but since this happens after you stopped scrolling (because you’re at the top already) the change of the height isn’t recognized.

This could be an approach to fix it:
Catch the height of the navigation 300ms after scrolling again. This brings the content closer as you wish. The only issue this is causing is a special behaviour if you scroll up a larger amount than just these few pixels.

To try this, download and activate a plugin for custom Javascript like Simple Custom CSS and JS and use this jQuery code:

$(function() {
  $(window).on('load resize scroll', function() {
    // as normal get the height on scroll
    $(".nav-placeholder").height($(".nav-container").outerHeight());
    setTimeout(function (){
    // refresh height after duration to catch nav-container height after transition-duration
      $(".nav-placeholder").height($(".nav-container").outerHeight());
    }, 300);
  });
});

In my honest opinion it’s not really that bad that there is a larger white space after scrolling only a few pixel. I don’t think many users would do this and then wonder about that space. Nonetheless, feel free to test the solution above. Maybe this special scroll behaviour is okay for your needs.

@westonruter

Thank you much for your explanation. In this case changing it manually seemed to easier. It solved the issue.

Hi @westonruter

Please test there.

What exactly do you mean with this? How do I get the patch and where is “there”?

This is my first bug report, so I’m quite unexperienced and would appreciate your instructions.

@raftingspot,

maybe I get the update finished this evening (CET) or this weekend. Depends on the amount of fixes and how long the testing takes.

Hi @raftingspot,

1) I guess this comes from a script that is calculating the navigation height slightly incorrect. With the next update it should be fixed.

2 and 3) You can change the spaces between them with this code. Paste it in a child theme or use the additional css section of the WordPress customizer and adjust the numbers to your needs:

h1, h2, h3, h4, h5, h6 {
  margin: 25px 0 10px;
}

The default was 25px 0 25px. This should put the paragraphs closer together.

If you need to change the spaces for the headlines differently, you can also use something like this:

h1, h2, h3 {
  margin: 25px 0 10px;
}
h4, h5, h6 {
  margin: 15px 0 5px;
}

Please provide some feedback whether this works for you. Feel free to ask any other question you might have.

Regards,
Terra Themes

Hi @ugotta,

I’ve never heard of or saw such a dropdown and I don’t think that this kind of feature would be used of most of the users. That’s why I don’t think I’ll implement it into Meteorite. Maybe a plugin can do this for you.

The transparency with the colors is something I already tried out a bit. But since all the colors are editable with CSS the result isn’t quite worth the effort to implement it. This would only come in a major update which isn’t planned, since I’m quite busy.

Thank you much for your feedback. I really appreciate that you like Meteorite.

Hello @partyo,

thank you much for your report.

Unfortunately I don’t have a iOS device ready to test this. Therefore I need some more infos about the issue.

– On which devices does it happen? Only on a specific one?
– On which screen sizes does it happen?
– Which menu is placed wrong? Mobile, sub menu, main menu?
– In which browser does this happen?
– Which verion of Meteorite and WordPress are you using?
– Does this happen only with the latest version of Meteorite?

Maybe some additional screenshots can clarify things up.

Regards,
Terra Themes

Hi @ugotta,

I just wanted to inform you about our update 1.10 on Meteorite which now supports masonry blog and archive layouts.

Since there are no real standardized ways to include post formats they will take some time to get into Meteorite.

Glad you found the solution! ??

Can you please provide a link which child theme configurator you are using?

Hi @ugotta,

the update is live now with Meteorite 1.8.3. This fixes the nextpage command in posts. Also these page links are styled to fit the blog/search/archive pagination you can select in the Customizer.

To hide the page links on the blog or archive page you can use this css

.blog .page-links, .archive .page-links {
  display: none;
}

If you want it only for some posts you need to add the custom post class to this rule.