Fixing mobile display issues with my widget

Hello,
URL: http://yourtechadvisors.com
On a mobile device, the profile widget gets pushed under the breadcrumbs. Is there a way to align the widget to the right like shown on desktop view and then have the breadcrumbs align to the left under the profile widget? This allows for more breadcrumb room before wrapping.

Thanks.

  • Alex Stine

    Hello,
    Here is the code I have in header.php.

    <?php
    /**
     * The Header for our theme.
     *
     * @package WordPress
     * @subpackage Elegant WPExplorer Theme
     * @since Elegant 1.0
     */
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    
    <head>
    	<meta charset="<?php bloginfo( 'charset' ); ?>">
    	<meta name="viewport" content="width=device-width">
    	<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>
    	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    	<?php if ( get_theme_mod('wpex_custom_favicon') ) { ?>
    		<link rel="shortcut icon" href="<?php echo get_theme_mod('wpex_custom_favicon'); ?>" />
    	<?php } ?>
    	<!--[if lt IE 9]>
    		<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
    	<![endif]-->
    	<?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    
    <!-- Begin Body -->
    <body <?php body_class(); ?>>
    
    <div id="wrap" class="clearfix">
    
    	<div id="header-wrap">
    		<?php wpex_hook_header_before(); ?>
    		<header id="header" class="clearfix">
    			<?php wpex_hook_header_top(); ?>
    			<div id="logo">
    				<?php if( get_theme_mod('wpex_logo') ) { ?>
    					<a href="<?php echo home_url(); ?>/" title="<?php echo get_bloginfo( 'name' ); ?>" rel="home"><img src="<?php echo get_theme_mod( 'wpex_logo' ); ?>" alt="<?php echo get_bloginfo( 'name' ) ?>" /></a>
    				<?php } else { ?>
    					 <h2><a href="<?php echo home_url(); ?>/" title="<?php echo get_bloginfo( 'name' ); ?>" rel="home"><?php echo get_bloginfo( 'name' ); ?></a></h2>
    				<?php } ?>
    			</div><!-- /logo -->
    			<nav id="navigation" class="clearfix">
    					<?php wp_nav_menu( array(
    						'theme_location'	=> 'main_menu',
    						'sort_column'		=> 'menu_order',
    						'menu_class'		=> 'sf-menu',
    						'fallback_cb'		=> false
    					)); ?>
    			</nav><!-- /navigation -->
    			<?php wpex_hook_header_bottom(); ?>
    		</header><!-- /header -->
    		<?php wpex_hook_header_after(); ?>
    	</div><!-- /header-wrap -->
    
    	<?php wpex_hook_content_before(); ?>
    	<div id="main-content" class="clearfix">
    	<?php
    if ( is_user_logged_in() ) {
    	$current_user = wp_get_current_user();
    	echo '<div style="float: right; width: 200px;"><div style="float: left; padding-right: 20px;">'.get_avatar( $current_user->ID, 32 ).'</div><div><p>Welcome '.$current_user->display_name.'!<br><a href="http://yourtechadvisors.com/edit-profile">Edit Profile</a></p></div></div>';
        }
    ?>
    <div id="custom-inner-header">
    <div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
        <?php if(function_exists('bcn_display'))
        {
            bcn_display();
        }?>
    </div>
    </div>
    	<?php wpex_hook_content_top(); ?>
    
    	<?php
    	if ( is_front_page() ) {
    		// Display subtitle if defined in the options panel
    		if ( get_bloginfo('description') ) {
    			// Display subtitle as long as it's not a paginated page
    			if ( !is_paged() ) { ?>
    			<header id="homepage-header">
    				<h1 id="homepage-title"><?php echo get_bloginfo('description'); ?></h1>
    				<?php get_search_form(); ?>
    			</header><!-- /homepage-header -->
    		<?php }
    		}
    	} ?>

    Here is the related CSS code.

    .breadcrumbs {
        font-size: 16px;
        margin-left: 20px;
    }
    .breadcrumbs:before {
        content: 'You are here: ';
    }
    
    #custom-inner-header > .breadcrumbs {
        width: 48%;
        display: inline-block;
        vertical-align: top;
    }
    
    #custom-inner-header {
        background: white;
    }

    Thanks.

  • Kasia Swiderska

    Hello Alex,

    Please move this part of code

    <?php
    if ( is_user_logged_in() ) {
    $current_user = wp_get_current_user();
    echo '<div style="float: right; width: 200px;"><div style="float: left; padding-right: 20px;">'.get_avatar( $current_user->ID, 32 ).'</div><div><p>Welcome '.$current_user->display_name.'!<br><a href="http://yourtechadvisors.com/edit-profile">Edit Profile</a></p></div></div>';
    }
    ?>

    to inside the the div with ID custom-inner-header. This will fix the profile widget.

    kind regards,
    Kasia

  • Alex Stine

    Hello,
    Unfortunately, it did not fix it, please view the revised file below.

    <?php
    /**
     * The Header for our theme.
     *
     * @package WordPress
     * @subpackage Elegant WPExplorer Theme
     * @since Elegant 1.0
     */
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    
    <head>
    	<meta charset="<?php bloginfo( 'charset' ); ?>">
    	<meta name="viewport" content="width=device-width">
    	<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>
    	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    	<?php if ( get_theme_mod('wpex_custom_favicon') ) { ?>
    		<link rel="shortcut icon" href="<?php echo get_theme_mod('wpex_custom_favicon'); ?>" />
    	<?php } ?>
    	<!--[if lt IE 9]>
    		<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
    	<![endif]-->
    	<?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    
    <!-- Begin Body -->
    <body <?php body_class(); ?>>
    
    <div id="wrap" class="clearfix">
    
    	<div id="header-wrap">
    		<?php wpex_hook_header_before(); ?>
    		<header id="header" class="clearfix">
    			<?php wpex_hook_header_top(); ?>
    			<div id="logo">
    				<?php if( get_theme_mod('wpex_logo') ) { ?>
    					<a href="<?php echo home_url(); ?>/" title="<?php echo get_bloginfo( 'name' ); ?>" rel="home"><img src="<?php echo get_theme_mod( 'wpex_logo' ); ?>" alt="<?php echo get_bloginfo( 'name' ) ?>" /></a>
    				<?php } else { ?>
    					 <h2><a href="<?php echo home_url(); ?>/" title="<?php echo get_bloginfo( 'name' ); ?>" rel="home"><?php echo get_bloginfo( 'name' ); ?></a></h2>
    				<?php } ?>
    			</div><!-- /logo -->
    			<nav id="navigation" class="clearfix">
    					<?php wp_nav_menu( array(
    						'theme_location'	=> 'main_menu',
    						'sort_column'		=> 'menu_order',
    						'menu_class'		=> 'sf-menu',
    						'fallback_cb'		=> false
    					)); ?>
    			</nav><!-- /navigation -->
    			<?php wpex_hook_header_bottom(); ?>
    		</header><!-- /header -->
    		<?php wpex_hook_header_after(); ?>
    	</div><!-- /header-wrap -->
    
    	<?php wpex_hook_content_before(); ?>
    	<div id="main-content" class="clearfix">
    <div id="custom-inner-header">
    <?php
    if ( is_user_logged_in() ) {
    	$current_user = wp_get_current_user();
    	echo '<div style="float: right; width: 200px;"><div style="float: left; padding-right: 20px;">'.get_avatar( $current_user->ID, 32 ).'</div><div><p>Welcome '.$current_user->display_name.'!<br><a href="http://yourtechadvisors.com/edit-profile">Edit Profile</a></p></div></div>';
        }
    ?>
    <div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
        <?php if(function_exists('bcn_display'))
        {
            bcn_display();
        }?>
    </div>
    </div>
    	<?php wpex_hook_content_top(); ?>
    
    	<?php
    	if ( is_front_page() ) {
    		// Display subtitle if defined in the options panel
    		if ( get_bloginfo('description') ) {
    			// Display subtitle as long as it's not a paginated page
    			if ( !is_paged() ) { ?>
    			<header id="homepage-header">
    				<h1 id="homepage-title"><?php echo get_bloginfo('description'); ?></h1>
    				<?php get_search_form(); ?>
    			</header><!-- /homepage-header -->
    		<?php }
    		}
    	} ?>

    Thanks.

  • Rupok

    Hi Alex

    Hope you had a wonderful day.

    Is there a way to align the widget to the right like shown on desktop view and then have the breadcrumbs align to the left under the profile widget?

    Thanks for granting Support Access. I've logged in and made some CSS adjustments. Can you please check and confirm? I used the following custom CSS:

    #custom-inner-header {
        height: 80px;
    }
    article {
      width: 100%;
    }

    Have a nice day. Cheers!
    Rupok

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.