[Resolved] menu above posts

Home Forums Support [Resolved] menu above posts

Home Forums Support menu above posts

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1268604
    Anil

    Hi

    I intend to have a menu above posts on homepage like in https://www.wpexplorer.com/blog/

    Please advise

    #1268680
    David
    Staff
    Customer Support
    #1268797
    Anil

    Thanks David, trying to implement that.

    1. how to add current-menu-item class for that particular category page.

    2. how to center the menu….

    Best regards.

    #1269099
    David
    Staff
    Customer Support

    1. Update the PHP in your Hook to this:

    <?php
    $cat_args = array(
    	'orderby'    => 'name',
    	'order'      => 'asc',
    	'hide_empty' => true,
    );
     
    $post_categories = get_terms( 'category', $cat_args );
     
    if ( ! empty( $post_categories ) ) {
        echo '<div class="post-cat-nav-container">
        <span class="post-nav-title">Categories</span>
    	<ul class="post-cat-nav">';
    		foreach ( $post_categories as $key => $category ) {
                $currentClass = ( is_category( $category->name ) ) ? 'current' : '';
    			printf( 
    				'<li>
    					<a class="%1$s" href="%2$s">
    						%3$s
    					</a>
                    </li>',
                    $currentClass,
    				get_term_link( $category ),
    				$category->name
    			);
    		}
    	echo '</ul>
    	</div>';
    }
    ?>

    And update the CSS to this:

    .post-cat-nav {
        list-style: none;
        margin: 0;
        padding: 10px 0;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        align-items: center;
        justify-content: center;
    }
    
    .post-cat-nav li {
        flex: 0 0 auto;
        margin-right: 0.5em;
    }
    
    .post-cat-nav li a {
        font-size: 15px;
        padding: 5px 12px;
        border: 1px solid;
        border-radius: 25px;
        border-color: transparent;
    }
    
    .post-cat-nav-container {
        text-align: center;
        padding-left: 30px;
        padding-right: 30px;
    }
    
    .post-cat-nav li a.current {
        border-color: #000;
    } 
    #1269163
    Anil

    Perfect ๐Ÿ™‚
    Thank you very much.
    you can see that now
    Best regards.

    P.S. Also notice below footer I wrote how fast is GP

    (This webpage is generated in 0.083 second with 46 queries at 2020-05-04 21:36:03.)

    Many a times page is generated in 40-50 milli second

    #1270078
    David
    Staff
    Customer Support

    Great to hear that – and those pagespeed stats are really impressive ๐Ÿ™‚

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