[Support request] Nav / mobile view / print-friendly view / footer widget layout

Home Forums Support [Support request] Nav / mobile view / print-friendly view / footer widget layout

Home Forums Support Nav / mobile view / print-friendly view / footer widget layout

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #229661
    Alexey Chumakov

    Hi Tom,

    Thanks again for awesome theme!

    After a year of using GP, may I suggest some improvements to GP? (or, maybe you already have the answers ๐Ÿ˜‰ Many of questions are especially relevant for international users, as non-English wording is rather often longer…

    1. In the primary / secondary nav, when there is not enough space, all the menu wraps across several lines (e.g. in windowed mode or on tablets). How could I (ะฐ) wrap each menu item separately, and/or (b) cut long text with ellipses?

    2. In secondary nav, when word wrap is unavoidable (windowed mode or ipad again), an individual menu item is being finally wrapped, but there is huge padding between the lines. How could I avoid this so 2 item lines are close together without extra margins / padding?

    3. In mobile view (with very narrow screens), site icon and search are on the 1st line, but menu dropdown is being pushed out to the second line. It is great if the theme could truncate menu item text automatically, and /or keep the menu on the 1st (and only) line of mobile header. How to achieve that?

    4. Again in mobile view, it would be great to keep menu items one-line-high (truncating them) or keep their lines together (as in #1). What can I do for that?

    And, these features could maybe improve GP experience (or what is the easiest way to do that?)

    5. It would be great to have extra tiny mobile header just above menu line (e.g. with some icon, background, and contact phone). What is the simplest way to add it?

    6. How could I name secondary nav in the mobile view? It would be great to make this visually adjustable.

    7. Is that possible to avoid compacting of one-item-only secondary nav into a dropdown header?

    8. A great option is to turn off copyright line and/or move it to one of the footer widgets, also allowing year and copy signs there. What is the easy way?

    9. Footer widgets are of fixed width now (100%/n). Is there an easy way to set up custom width (e.g. for left widget to follow left sidebar, middle ones to cover main lane width, etc.?)

    10. An option to choose the ‘back to top’ control position would be great, to avoid interference with some ‘online advisor/callback’ and ‘floating widget’ things. How could I adjust that without having a daughter theme?

    11. Is there any button generator among GP add-ons?

    12. Is there an easy way to manage turning on/ off of some page parts (e.g. sidebars, after-content social buttons, etc.)? Also, Currently, using mobile header for printing doesn’t seem to be the best option in all the cases. What is easily possible now?

    โ€ฆIf some of the above could make it way to forthcoming releases, I would be happy ๐Ÿ˜‰ anyway, please suggest how to achive the desired effect now? Thank you!

    …Also, as I was translating GP into Russian, I’d like to submit an update in the nearest future. How close are you to any updatesโ€”should I wait or just work on translation with current version?

    Cheers,
    Alex

    #229714
    Tom
    Lead Developer
    Lead Developer

    Hi Alex,

    Thank you so much for the suggestions! I appreciate it ๐Ÿ™‚

    1. This is a very tough thing to do in web design – unfortunately there is no easy solution that isn’t very hacky.

    One thing you can do is reduce the font size of your menu items at certain break points, for example:

    @media (max-width: 1000px) {
        .main-navigation .main-nav li a {
            font-size: 14px;
        }
    }

    2. That’s because the height of the menu item is set using line-height instead of padding. You can reverse that like this:

    .secondary-navigation .main-nav ul li a, 
    .secondary-navigation .menu-toggle {
        line-height: normal;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    3. That doesn’t sound right, any chance you can show me this?

    4. Unfortunately this is just kind of an unavoidable thing with menus and HTML/CSS – in my experience, it’s best to keep the main menu as simple and short as possible for user experience. Your footer is where you can really go nuts with tons of links (like the footer of this site).

    5. Some people have asked for an add-on for this – I’m definitely considering it. For now, it can be accomplished using the GP Hooks add-on. For example: https://generatepress.com/forums/topic/top-bar-2/

    If you search for “Top bar” on the forums here you should find some other examples as well.

    6. You mean the “Menu” text? You can adjust that in “Customize > Layout > Secondary Navigation”.

    7. This should help: https://generatepress.com/forums/topic/secondary-navigation-on-mobile-question/#post-120014

    8. Interesting.. You can remove it like this:

    add_action('after_setup_theme','generate_copyright_remove_default_message');
    function generate_copyright_remove_default_message()
    {
    	remove_action( 'generate_credits', 'generate_add_footer_info' );
    	remove_action( 'generate_copyright_line','generate_add_login_attribution' );
    }

    Copyright symbol can be done like this: ©

    The date is a little more tricky.. You would need to create a shortcode like this:

    add_shortcode( 'get_the_year','tu_get_the_year' );
    function tu_get_the_year()
    {
        return date( 'Y' );
    }

    Then you could use [get_the_year] in your widget.

    9. This is pretty easy with CSS: https://generatepress.com/forums/topic/flexible-footer-widths/

    10. You can add CSS without a child theme if you use a plugin like my Simple CSS one: https://wordpress.org/plugins/simple-css/

    The CSS is pretty simple:

    .generate-back-to-top, 
    .generate-back-to-top:visited {
        right: auto;
        left: 30px;
    }

    11. There isn’t, I’m not a fan of using shortcodes inside the theme – if you ever change themes, your buttons would just be a bunch of shortcodes instead of anything useful. CSS and HTML is way better for stuff like this, and not much more complicated: https://generatepress.com/forums/topic/buttons-2/

    12. Sidebars can be turned on/off on individual pages: https://generatepress.com/knowledgebase/choosing-sidebar-layouts/

    Social icons etc.. depend on the plugin you’re using, but in most cases you can use CSS and my Simple CSS plugin adds a metabox for CSS only on specific pages.

    Not sure what you mean by mobile header for printing? Printing should print the entire page as seen on your desktop – the mobile header shouldn’t appear.

    Thanks again for the ideas – there’s a couple in here I could see myself adding to the theme.

    There’s about to be a really big GP Premium update, so I would hold off on any translating until after it’s out. That reminds me, I need to update the .pot files before release ๐Ÿ™‚

    Hope this helps!

    #230171
    Alexey Chumakov

    Thank you Tom, for very quick support!

    3. http://tachu.ru (as international menu item wording could be longer)

    4. I’d like to keep to that, but, thinking internationally, it’s not always possible ๐Ÿ˜‰ Any ideas?

    5. I mean it would be great to have a mobile-only top bar, independently of secondary nav.

    12. It’s all about printing. For some reason, the theme is printing in mobile view for me. Then, questions are 1) how to control whether to print mobile or desktop view? 2) How to (elegantly) turn off sidebars and/or other elements just for printing?

    The website is http://tachu.ru

    Thank you again!

    PS. Re: all the rest โ€” I got it, thanks! Re: translation – will wait ๐Ÿ˜‰

    #230207
    Tom
    Lead Developer
    Lead Developer

    3. That is a long word. Not possible to shorten it? There’s an option to edit it using Menu Plus in “Customize > Layout > Primary Navigation”.

    4. Hmm, you could reduce the size of the text on mobile? Can’t think of much else off the top of my head.

    5. For now you’ll have to use GP Hooks, but I’m definitely considering an add-on for this. It wouldn’t strictly be mobile only, but it would be easy enough to make mobile only.

    12. Interesting, I’ll have to look into this more before making any changes to the core theme.

    Right now, you can specify CSS for printing only using media queries:

    @media print {
        /* CSS in here */
    }

    Glad the rest of my answers helped ๐Ÿ™‚

    #230313
    Alexey Chumakov

    Hi Tom,

    3, 5 will be definitely resolved by a top bar

    4 will try

    12 sure, it makes sense to dig into ‘print view’ for future.

    So, everyting’s clear, and I’ll try to adjust my website using your suggestions. Plus–looking forward to any top bar and print view updates for GP theme.

    Thank you again for prompt and comprehensive support!

    -Alex

    #230349
    Tom
    Lead Developer
    Lead Developer

    Thanks for the conversion and ideas! I appreciate it ๐Ÿ™‚

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