OK, thanks — I’ll pass that on to the client.

You can close it. Thanks.

Thanks, Rikard, but that still left what looked like an empty column to the right of the content and left of the sidebar:
https://www.evernote.com/shard/s320/sh/e239d2ae-8e28-4673-8c67-3ae4729f81a1/4c32cbfc21698e9b6a0f147871c6b8a2
https://www.evernote.com/shard/s320/sh/f1f713c5-dc23-49ef-8bfa-bb24c571ce9f/b725e132e98742276e9fae72dd472cd5

I added some css which seems to handle that, but I’m not sure if it’s the best method or if it will maybe negatively affect other things in the site.

Also, the iPad Pro portrait layout — at 1024px wide — is wide enough to accommodate the right column, so I dropped the max width down to 1023px — maybe there’s a better/lower, more standard width I should use for that?

Finally, I left in my css for reducing the padding in the content and sidebar, for the iPad Pro portrait layout, since it was still a tad cramped.

So here’s what I ended up with, in total (including what you sent me above) — please let me know if you see any problems with this or have any suggestions for improvement, streamlining, etc.

Thanks!

/* MOVE SIDEBAR DOWN BELOW CONTENT IN TABLET PORTRAIT VIEW */
@media only screen and (min-device-width : 768px) and (max-device-width : 1023px) and (orientation : portrait) { 
.container .av-content-small.units {
   width: 100% !important;
}
  .content .entry-content-wrapper {
    padding-right: 0;
}
  .content {
    border-right: none;
}
  .inner_sidebar {
    margin-left: 0;
}
  #top #main .sidebar {
    border-left: none;
    overflow: visible;
}
}
/* REDUCE PADDING IN IPAD PRO PORTRAIT VIEW */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation : portrait) {
  .container {
      padding: 0px 30px;
  }
  .content, .sidebar {
    padding-top: 20px;
  }
  .inner_sidebar {
      margin-left: 30px;
  }
}

• This reply was modified 6 years, 4 months ago by sky19er.

OK, thanks — yep; close it.

OK, but before I do that, the reason I’m asking is because I suspect the default, no predefined color scheme also provides way better styling of the sidebar automatic “Page Sidebar navigation”.

I have one site which I left with the default, no predefined color scheme, and the sidebar navigation styling is great (see https://www.evernote.com/shard/s320/sh/a6d52cbe-5c4e-4fa9-bc93-e8058ed3781d/b0922360e76392b31fa7463c2f0c11ad ).

And another where, no matter which predefined color scheme I choose, the sidebar navigation seems kind of lame ( https://www.evernote.com/shard/s320/sh/2360732d-10a7-4091-92aa-8275c8ecf995/0a86324ae06ebb62b0f39d4ed9ab7ff6 — no indenting of child pages, no background color on current page item, bigger font, no spacing, etc. (note, I’m just starting on this site, so everything else is pretty lame, too ;)).

Do you think this is indeed do to the default / no predefined color scheme providing better styling for that sidebar menu? Is there a way to get that good sidebar nav styling without reverting and losing all my other theme options? Should I start a new thread for this?

Thes sites are both in development, so I’ll include credentials for both, here.

Thanks and let me know if you have any other questions.

Nice — perfect!! Thank you!!

You have to be logged into the admin to view the site (credentials in Private Content). I’m referring to the Annual Symposium section — http://03601fe.netsolhost.com/wordpress1/annual-symposium/. When someone clicks on the Photo Entries page — http://03601fe.netsolhost.com/wordpress1/annual-symposium/annual-photo-contest/photo-entries/ — I’d like the sidebar menu title to remain as Annual Symposium instead of changing to Photo Contest.

Thanks and let me know if you have any other questions.

Sorry, false alarm, I guess I figured that out — I just removed the class in the function, right below that comment, so the code now looks like as shown below. But that didn’t handle what I was hoping it would also solve which is, once I click on a child page, the menu title changes to the parent of that child. Is there a way to tweak this code so that the title doesn’t change when you click on the child (i.e., so the menu/section title stays the same for the whole section)? Maybe you want me to start a new thread for this?

function avia_sidebar_menu($echo = true)
    {
        $sidebar_menu = "";

        $subNav = avia_get_option('page_nesting_nav');
  
        
        $the_id = @get_the_ID();
        $args = array();
		global $post;

        if($subNav && $subNav != 'disabled' && !empty($the_id) && is_page())
        {
            $subNav = false;
            $parent = $post->ID;
            $sidebar_menu = "";

            if (!empty($post->post_parent))
            {
                if(isset($post->ancestors)) $ancestors  = $post->ancestors;
                if(!isset($ancestors)) $ancestors  = get_post_ancestors($post->ID);
                $root	= count($ancestors)-1;
                $parent = $ancestors[$root];
            }

            $args = array('title_li'=>'', 'child_of'=>$parent, 'echo'=>0, 'sort_column'=>'menu_order, post_title');

            //enables user to change query args
            $args = apply_filters('avia_sidebar_menu_args', $args, $post);

            //hide or show child pages in menu - if the class is set to 'widget_nav_hide_child' the child pages will be hidden
            $display_child_pages = apply_filters('avia_sidebar_menu_display_child', $args, $post);

            $children = wp_list_pages($args);

            if ($children)
            {

				$default_sidebar = false;
				$parent = get_the_title($post->post_parent);
				$parentlink = get_the_permalink($post->post_parent);
				$sidebar_menu .= "<nav class='widget widget_nav_menu $display_child_pages'><ul class='nested_nav'>";
				$sidebar_menu .= "<h3 class='widgettitle'><a href='{$parentlink}'>$parent</a></h3>";
				$sidebar_menu .= $children;
				$sidebar_menu .= "</ul></nav>";
            }
        }

        $sidebar_menu = apply_filters('avf_sidebar_menu_filter', $sidebar_menu, $args, $post);

        if($echo == true) { echo $sidebar_menu; } else { return $sidebar_menu; }
    }

OK, fair enough, thanks anyway.

Thanks, but I don’t have all the mobile devices needed to check on actual mobile devices. But I see a change in the Chrome Inspector Emulator — now it looks like the alternate logo is only being used up to max width 768 — I need it for set to max width 1024.

Thanks again and let me know if you have any other questions.

Nice, that works — I just had to then add some css to hide those widgets in mobile views, when the header switches to top/horizontal, Thanks Mike!