[Resolved] article number in columns, iPad orientation problem, Slideout Menu

Home Forums Support article number in columns, iPad orientation problem, Slideout Menu

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
  • #244324

    Hi Tom,

    Really liking your theme and already set up a redesign of our blog with it. Now there are just a few hiccups I wanted to get solved, so I thought I could find help here. Thanks for your great work so far!

    1. I have set the articles on the blog in 2 columns, with the first article being full size. What I have done now is setting the articles per page to 9. So that I have an even line at the bottom. The thing is, that there is no full size article on page 2 and all following. Thus makes an uneven number of articles at the bottom. The solution would be to have 9 articles displayed on page 1 and 10 articles on the following pages. I just don’t know hot to do this.
    Maybe this is something you also might consider for later iterations of your theme.

    2. In landscape mode on iPad I get an odd spacing between the left side and the content. The header and content aren’t aligned anymore. Also the spacing between the content and the sidebar is bigger than than supposed to be. So the spacing is bigger than all horizontal spacings and the spacing between the columns of the articles.

    3. If I change from landscape to portrait mode, the photos that are embed don’t scale accordingly, they are to small. The other way around they get to big and overlap.

    4. Is there a way to make the top row with the Logo and Menu sandwich higher on mobile? I couldn’t find a way with the Menu still vertical aligned in the middle.

    4. I used the Slideout Menu to combine the Primary and Secondary Menu in one. That btw is a real pain. I don’t know if there could be an easier way to structure those lists, because the lists really gets long, if you have many sub navigation points.
    My problem with that is, that you need to tap on the small arrows to open the sub levels. I also installed your Legacy Menu Plugin, but to no avail.

    5. Because I combined Primary and Secondary Menu in one, I wanted to know if there is a way to make small break between these two parts in the Slide out Menu? Or a way to highlight some menu points. I know this is possible, but I couldn’t find the thread about this anymore.

    6. Right now on desktop there are two columns of articles (the first full size) and a sidebar. Is there a way to change the appearance on iPad portrait mode to one column of articles and the sidebar?
    Of course this would make the need of the Primary and Secondary Menu still working as intended on desktop.

    7. Is there a way to make the Favicon different from the apple-touch-icon? Because there is a huge difference in size and it makes no sense to have text on the favicon.


    That’s it for now. Thanks for reading!

    Lead Developer
    Lead Developer

    Hi there,

    Glad you’re enjoying the theme!

    1. This is a good point – I’ve made a note to do a little research about this and will definitely address it in a future version.

    2. Any chance you can show me a screenshot of these issues?

    3. Interested to see this as well. My iPad is currently in use (youtube lullaby in the baby room), but I will check it out in the morning.

    4. The top bar with the logo/menu should be at the very top on mobile? Have you tried using the Mobile Header feature?

    5. Not sure what the solution could be here? If you have a lot of menu items, the list is going to be long regardless? Or am I missing something?

    Tapping the arrows can be annoying – but there is an option to make it so the entire menu item is clickable in “Customize > Layout > Primary Navigation > Dropdown type”. If you choose to Click – Arrow, then making the parent item link to “#” will make the entire menu item clickable. Of course, Click – Menu Item makes the entire menu item clickable by default.

    6. You can always add custom classes to your menu items, and then use CSS to change the appearance of them. For example, a custom menu item with no link (#, or empty), with a custom class could be used as a heading for the menu items below it. There’s more information on custom classes etc here: https://generatepress.com/knowledgebase/using-menus/

    7. You can force the columns to be full width with this CSS:

    .generate-columns {
        padding-left: 0;
        padding-right: 0;
        display: block;
        max-width: 100%;
        float: none;
        width: auto;

    You would just need to place that CSS inside the appropriate media query for what you’re looking for. You can find those here: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    8. I believe you can just upload your favicon.ico file to the root directory of your website. Not sure if the Customizer option for the site icon overwrites that though (that’s core WP functionality).

    It may be necessary to ignore that option and manually specify the touch icon in the wp_head hook using the required meta tag.


    Thanks for the fast answer!

    1. That sounds good!

    2. http://thebricktime.de/img/test/IMG_1877.PNG

    3. This morning the problem didn’t exist.. odd.
    Just found the problem. It’s working when I take out the flicks-embed code.

    4. Okay, I didn’t really made my point clear enough (foreign languages..). The top bar is of course already on top. I meant that I would like to change the height of it a little bit. But when I increase the size of it, the font (Menu with the three stripes) gets out of alignment and stuck to the top.

    5. You are right, but it would be a great help if parental items could collapse. So you don’t have an endless list. Also it would be nice to have the option to import and export it, say from the primary to the slide out menu in this case. Because I would have to do everything twice.

    If I do as you suggested, the hover to open option on desktop isn’t anymore. But the problem isn’t on desktop. It’s on mobile. So the primary menu should be handled separately from the slide out menu, which I am talking about.

    6. I’ll look into this.

    7. It’s not really just about the columns, but more about the sidebar the goes beneath everything else in portrait mode, while their would be enough space for the content AND the sidebar.

    8. Unfortunately putting it in the root directory is not the solution. It seems to get overwritten.

    Lead Developer
    Lead Developer

    2. Thanks for showing me this – I’ll look into it.

    4. Can you show me what you mean?

    5. Not sure if it’s possible to export/import menu items or merge multiple menus into one. Good idea though!

    I agree, it would be nice if there was a filter to force entire menu click on mobile only. Will look into this.

    7. You can force the sidebars to appear on mobile (or any width you like using a media query): https://gist.github.com/generatepress/6c04c608d24b7c036303

    8. If you keep the site icon option in the Customizer empty (not set), there shouldn’t be anything to overwrite it.


    Thanks for looking into these problems. I can assure you it’s worth it, because the site already exists for 10 years now and won’t disappear any time soon.

    The problem with those spacings I showed you in the screenshot also takes place on Desktop of you scale the window smaller until it brakes into this.

    Here is a screenshot of the example I mean. I want the red highlighted menu to be bigger.


    I found the option to add classes to the menus in the sidebar, but I don’t know how to address them in css. By that I mean I don’t know what should stand in front of my custom class in the css plugin.

    Another thing I found is, that when I see the preview of the articles/overview of the articles, all line breaks get ignored. Also the floating around images doesn’t work. When I open a specific article all line breaks and floating of the text around the images work.

    Lead Developer
    Lead Developer

    1. I’ve been playing with the spacing – would you want to test what I’ve done? If so, shoot me an email: https://generatepress.com/contact

    2. This will increase the mobile header height:

    .mobile-header-navigation .main-nav ul li a, 
    .mobile-header-navigation .menu-toggle, 
    .mobile-header-navigation .mobile-bar-items a {
        line-height: 100px;

    I see you added custom CSS for your mobile header – you’ll need to adjust it as well to fit. For example:

    .mobile-header-navigation .mobile-header-logo, 
    .mobile-header-navigation .mobile-header-logo img {
        height: 50px;
        width: 150px;
        margin-top: 10px;

    3. You can target your menu classes like this:

    .main-navigation .main-nav ul li.your-custom-class a {
        /* CSS for custom class here */

    4. Not sure what you mean here? If you have excerpts enabled, then no HTML will show up in the excerpts (line breaks, images etc..).


    1. I emailed you.

    2. Cool, that worked out well!

    3. It’s not working. Shouldn’t it be something with slide-out nav instead of main nav?

    4. I have excerpts disabled. I insert the break manually.
    What I mean is if you for example go to this overview here
    then the text is not around the first small image, but it is (and that’s intended) when you click on the specific article. And I would like to see the same effect on the preview as well.

    Lead Developer
    Lead Developer

    1. I sent the latest version last night – did you receive it?

    3. It has the .main-navigation class as well. Which item did you add your class to?

    4. Strange, your alignleft class has a slash in it: alignleft/.

    Maybe double check to make sure that slash wasn’t added in there by mistake?


    1. I got it. Went to spam..

    3. I add the class to “CHRONO” and “Terran Confed”

    4. I see that in my code.
    <img src="http://brick.jamescook.nu/wp-content/uploads/2013/09/chrono.png" alt="CHRONO" width="100" />
    And I just took the align option from WordPress directly, so that I wouldn’t make a mistake and to test it, so that anybody else could use it.
    Also it’s working on the article itself. Just not in the preview.

    Lead Developer
    Lead Developer

    3. I’m not seeing a custom class?: http://www.screencast.com/t/yX17h1q2iT3T

    4. It looks like there’s no quotes around alignleft.

    Right now it’s: class=alignleft

    It should be: class="alignleft"


    1. Have you come up with a solution for this yet?

    3. I figured it out. I just forgot it in that case.

    4. No that’s not the issue, because in the article itself the text is wrapping around the image. Just not in the preview.


    1. A solution for that could also be, that the first article on every page is also full width, not just the first article on the first page.

    Lead Developer
    Lead Developer

    1. Not quite, hopefully it will be in the next update.

    4. Have you tried adding the quotes?


    1. Okay, keep me updated! 🙂

    4. This is so odd. It was not showing in the preview, but in the article it worked. With the quotes now it works in both. And call me stoic, but I really thought I tried that one before.

    Nonetheless, thank you really much for your time and effort. I thought it would be worth mentioning your theme and your support on our blog. 🙂

    Lead Developer
    Lead Developer

    Thank you! I appreciate that 🙂

    Glad I was able to help!

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.