🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] logo centered on nav, a little more help

Home Forums Support logo centered on nav, a little more help

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #1175582
    sparkle

    hi there,

    i followed the directions here to put my logo in the center of my nav. super straightforward, thanks for having such great docs.

    https://docs.generatepress.com/article/centering-logo-navigation/

    i’m trying to get it to degrade nicely for smaller screens. i was able to make the logo disappear, but am not sure what else i can do about the awkward spacing below about 1024. do you have any ideas?

    #1175829
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You can hide the separator at whatever width using a media query:

    @media (max-width: 1024px) {
        .main-navigation .menu-item-separator {
            display: none;
        }
    }

    This kind of layout is typically best to menus with minimal menu items – it can be a little tricky adjusting things to be responsive when there are lots of items getting in the way.

    #1180721
    sparkle

    ok. i’m getting closer to what i want. how do i make the hamburger toggle closed by default at the breakpoint?

    #1180934
    Leo
    Staff
    Customer Support

    I’m confused.

    It should be closed by default.

    Can you disable all caching plugins so I can take a closer look?

    #1181201
    sparkle

    hmmm. i don’t have any caching plugins installed on this one. happy to give you access if that helps.

    #1181497
    Leo
    Staff
    Customer Support

    Looks like something called Event Espresso?

    Can you just disable all plugins except GP Premium for now?

    #1181513
    sparkle

    i disabled everything. fyi, this is the dev site, so EE throws an error because it’s not the registered url for the access key.

    #1181575
    Leo
    Staff
    Customer Support

    That’s just super strange.

    Can you switch to the parent theme to eliminate any errors in the child theme?

    Any other custom functions added?

    #1181580
    sparkle

    not surprisingly, when i enabled the parent theme i see it’s something in my child theme. i have no idea what though.

    i do have some things in my functions file:

    <?php
    /**
     * GeneratePress child theme functions and definitions.
     *
     * Add your custom PHP in this file. 
     * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
     */
    
    function generatepress_child_enqueue_scripts() {
    	if ( is_rtl() ) {
    		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
    	}
    }
    add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );
    
    /** 
     * Enqueue Font Awesome. 
     */
     
     add_action( 'wp_enqueue_scripts', 'tu_load_font_awesome' );
     
     
    function tu_load_font_awesome() {
        wp_enqueue_style( 'font-awesome', '//use.fontawesome.com/releases/v5.5.0/css/all.css', array(), '5.5.0' );
    }
    
    /**
     * Remove archive page labels.
     * 
     * @param  string $title Current archive title to be displayed.
     * @return string        Modified archive title to be displayed.
     */
     
    add_filter( 'get_the_archive_title', 'my_theme_archive_title' );
    
    function my_theme_archive_title( $title ) {
        if ( is_category() ) {
            $title = single_cat_title( '', false );
        } elseif ( is_tag() ) {
            $title = single_tag_title( '', false );
        } elseif ( is_author() ) {
            $title = '<span class="vcard">' . get_the_author() . '</span>';
        } elseif ( is_post_type_archive() ) {
            $title = post_type_archive_title( '', false );
        } elseif ( is_tax() ) {
            $title = single_term_title( '', false );
        }
    
        return $title;
    }
     // Move add to cart button below quantity on single product page
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
    add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 15 );
    
     // Remove additional information tab from single product
    add_filter( 'woocommerce_product_tabs', 'remove_additional_information_tab', 100, 1 );
    function remove_additional_information_tab( $tabs ) {
        unset($tabs['additional_information']);
    
        return $tabs;
    }
    
    // Add "additional information" after add to cart  on single product page
    add_action( 'woocommerce_single_product_summary', 'additional_info_under_add_to_cart', 35 );
    function additional_info_under_add_to_cart() {
        global $product;
    
        if ( $product && ( $product->has_attributes() || apply_filters( 'wc_product_enable_dimensions_display', $product->has_weight() || $product->has_dimensions() ) ) ) {
            wc_display_product_attributes( $product );
        }
    }
    
    /**
     * Move Product Description up to main section  on single product page
     * 
     */
    
    function woocommerce_template_product_description() {
    wc_get_template( 'single-product/tabs/description.php' );
    }
    add_action( 'woocommerce_single_product_summary', 'woocommerce_template_product_description', 20 );
    
    add_action( 'woocommerce_before_add_to_cart_form', 'woocommerce_output_product_data_tabs', 10 );
    
    // remove product description from bottom of single product pages
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
    add_filter( 'woocommerce_product_tabs', 'wc_remove_description_tab', 11, 1 );
    function wc_remove_description_tab( $tabs ) {
        if ( isset( $tabs['description'] ) ) {
            unset( $tabs['description'] );
        }
    }
    
    // testimonial archive columns
    
    add_filter( 'generate_blog_columns','generate_adjust_columns' );
    function generate_adjust_columns( $columns )
    {
        if ( is_post_type_archive( 'testimonial' ) ) :
            return true;
        endif;
    
        return $columns;
    }

    and this is my child theme style.css

    /*
     Theme Name:   GeneratePress Child
     Theme URI:    https://generatepress.com
     Description:  Default GeneratePress child theme
     Author:       Tom Usborne
     Author URI:   https://tomusborne.com
     Template:     generatepress
     Version:      0.1
    */
    
    /*** sitewide/layout  ***/
    
    body .grid-container {
        max-width: 90%;
    }
    input, select, textarea {font-family: "Open Sans", Sans-serif; }
    
    .sidebar {margin-top: 5%;    
    }
    
    a.button, button.button, input.button, #review_form #submit, button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited, a.wp-block-button__link:not(.has-background), .wp-show-posts-read-more  {border-radius: 100px!important; }
    
    /*** navigation  ***/
    .main-navigation ul ul {box-shadow: 0px 0px 5px 0.3px #4817a7; }
    
    .main-navigation .main-nav ul li[class*="current-menu-"] > a {border-bottom: 2px solid rgba(71, 23, 166, 0.6); text-shadow: 0px .5px #010106; 
    	font-weight:  500;}
    
    /*** gp center logo in nav https://docs.generatepress.com/article/centering-logo-navigation/  ***/
    .inside-header {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-align: center;
    	    -ms-flex-align: center;
    	        align-items: center;
    }
    
    .header-widget {
    	order: 10;
    	overflow: visible;
    }
    
    .nav-float-right .header-widget {
    	top: auto;
    }
    
    .nav-float-right .header-widget .widget {
    	padding-bottom: 0;
    }
    
    .site-branding,
    .site-logo {
    	position: absolute;
    	left: 50%;
    	-webkit-transform: translateX(-50%);
    	        transform: translateX(-50%);
    	z-index: 200;
    }
    #mobile-header .mobile-bar-items {
    	-webkit-box-ordinal-group: 5;
    	-ms-flex-order: 4;
    	order: 4;
    	margin-left: auto;
    }
    #site-navigation {
    	float: none;
    	width: 100%;
    }
    
    .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    }
    
    .main-navigation .menu-item-separator {
    	-webkit-box-flex: 1;
    	    -ms-flex-positive: 1;
    	        flex-grow: 1;
    }
    
    .main-navigation .menu-item-separator a {
    	font-size: 0;
    	background: transparent !important;
    }
    
    .slideout-navigation .menu-item-separator,
    .main-navigation.toggled .menu-item-separator{
    	display: none !important;
    }
    
    @media (max-width: 768px) {
    	.inside-header>:not(:last-child):not(.main-navigation) {
    		margin-bottom: 0;
            }
    }
    
    @media (max-width: 1024px) {
        .main-navigation .menu-item-separator {
            display: none;
        }
        
        .site-header .header-image {
        display: none;
        }
        
        .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {display: grid;}
        
        .mobile-bar-items.wc-mobile-cart-items {
        display: none;
    }
    
    }
    }
    /*** END gp center logo in nav https://docs.generatepress.com/article/centering-logo-navigation/  ***/
    
    /*** front page elements  ***/
    
    /* hero */
    .elementor-554 .elementor-element.elementor-element-3c60d19f.elementor-widget-heading .elementor-heading-title, .elementor-554 .elementor-element.elementor-element-54455ba3.elementor-widget-heading .elementor-heading-title {
        -webkit-text-stroke: black .5px;}
    
    /* ee3 */
    
    .elementor-element-f3e97d7.elementor-widget.elementor-widget-wp-widget-events-widget div.elementor-widget-container ol {list-style: none; margin: 0;}
    .elementor-element-f3e97d7.elementor-widget.elementor-widget-wp-widget-events-widget div.elementor-widget-container ol li a {font-weight: 700;}
    .elementor-element-f3e97d7.elementor-widget.elementor-widget-wp-widget-events-widget div.elementor-widget-container ol li a span.widget-event-date {font-weight: 300;}
    
    /* blog latest article */
    #wpsp-836 .wp-show-posts-entry-header {
        margin: -15% 0 1em;
        z-index: 100;}
     #wpsp-836 .wp-show-posts-entry-header a {
        color:white; font-weight: 600; text-shadow: 0px 2px 4px #000000; }
    
    /*** woocommerce  ***/
    .woocommerce-breadcrumb {font-family: "Rokkitt", Sans-serif;}
    
    div.entry-content nav.woocommerce-breadcrumb a  {color: #4817a7;}
    div.entry-content nav.woocommerce-breadcrumb {color: #871b88;} 
     
    
     
    
    .woocommerce-products-header {display: none;}
    
    .product-template-default div.summary.entry-summary p {   font-family: "Open Sans", Sans-serif; line-height: 180%;}
    
    /* woocommerce  increase space between rows on shop pg */
    .woocommerce ul.products li.product.woocommerce-text-align-left .button {
        margin-bottom: 5vh;
    }
    
    .single-product .product .single_add_to_cart_button.button, .woocommerce .product .add_to_cart_button.button, .product-type-external a.button.product_type_external{
    	border-radius: 100px; font-family: "Rokkitt", Sans-serif; text-transform: uppercase; font-weight: 600;
    }
    
    .woocommerce div.product .product_title, .woocommerce table.shop_attributes,  .related.products h2, .product-template-default div.summary.entry-summary h2 , .woocommerce-Price-amount.amount, a.woocommerce-LoopProduct-link.woocommerce-loop-product__link h2.woocommerce-loop-product__title, nav.woocommerce-pagination ul.page-numbers li a.page-numbers {font-family: "Open Sans", serif; }
    
    a.woocommerce-LoopProduct-link.woocommerce-loop-product__link h2.woocommerce-loop-product__title,  {font-family: "Open Sans", serif; font-size: 90%;
        font-weight: 700;
    }
    
    /*** event espresso **/
    
    aside#events-widget-2.widget.inner-padding.events ol li a {font-weight: 700;}
    aside#events-widget-2.widget.inner-padding.events ol li a span.widget-event-date {font-weight: 300;}
    
    /*** short testimonials full page width ***/
    
    .short-testimonials {
    	text-shadow: 0px 2px 4px #cccccc;}
    	
    .amazingslider-title-1	{
        color: #3B45E1;
        font-family: "Rokkitt", Sans-serif;
        font-size: 150%;
        font-weight: 700;
        text-shadow: 0px 2px 4px #cccccc;
    }
    	
    .st-button {
    	text-shadow:none; 
    	
    }
    .st-callout {font-family: "Rokkitt", Sans-serif;
        font-size: 130%;
        font-weight: 700;
        color: #3B45E1;
        
        }
        
     .st-attribution {color: #005257;
    	     font-family: "Open Sans", Sans-serif;
    	font-size: 80%!important; 
        font-style: italic;
        float:right;
        text-align:start;
        text-indent:-5em;
    	 
     }   
     
     
     /* archive read  more float right */
     .read-more {
        margin-top: 2%;
        float: right;
        text-transform: uppercase; font-family:  "Rokkitt", Sans-serif; font-size: 90%;
            font-weight: 500;
    
    }
        
    .sidebar .widget, .footer-widgets .widget {
        font-size: 15px;
    }    
        
        /******************** smaller media mobile adjustments ************************ */
        /******************** smaller media mobile adjustments ************************ */
        /******************** smaller media mobile adjustments ************************ */
        /******************** smaller media mobile adjustments ************************ */
        
        
        /* very large screens  HUGE */
        @media (min-width: 1824px) { 	
        	/* comment */
        
        	
        /* END very large screens  HUGE */	}
        	
        
        
        /* Portrait tablet to landscape and desktop  LAPTOP */
        @media (min-width: 768px) and (max-width: 1024px) { 
        	/* comment */
    
        /* END Portrait tablet to landscape and desktop */}
        
        
        /* Landscape phone to portrait tablet  TABLET */
        @media (max-width: 767px) { 
        	/* comment */
        	
    .elementor-484 .elementor-element.elementor-element-f0ef5e3:not(.elementor-motion-effects-element-type-background) > .elementor-element-populated, .elementor-484 .elementor-element.elementor-element-f0ef5e3 > .elementor-column-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer  {background-image:none!important;}
    .amazingslider-description-1, .amazingslider-title-1 {
        font-size: 125%!important;
    }
    
             
        /* END Landscape phone to portrait tablet */}
        
        
        /* Landscape phones and down  PHONE*/
        @media (max-width: 480px) { 
        	/* comment */
        	
        	.site-header .header-image {
        display: none;
    }
        	
        /* END Landscape phones and down */}
        
    html, body {
            max-width: 100%;
            overflow-x: hidden;
        }
        		
    #1181586
    Leo
    Staff
    Customer Support

    That’s tough for me to tell.

    Start with disabling all the PHP functions first and enable them one by one until you identify the issue.

    If that doesn’t work then do the same thing for CSS.

    #1181601
    sparkle

    i think it’s somewhere in this block. i got from the docs in the url in my comment. the last bits i added when tom answered my forum topic. when i remove it the hamburger works properly.

    /*** gp center logo in nav https://docs.generatepress.com/article/centering-logo-navigation/  ***/
    .inside-header {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-align: center;
    	    -ms-flex-align: center;
    	        align-items: center;
    }
    
    .header-widget {
    	order: 10;
    	overflow: visible;
    }
    
    .nav-float-right .header-widget {
    	top: auto;
    }
    
    .nav-float-right .header-widget .widget {
    	padding-bottom: 0;
    }
    
    .site-branding,
    .site-logo {
    	position: absolute;
    	left: 50%;
    	-webkit-transform: translateX(-50%);
    	        transform: translateX(-50%);
    	z-index: 200;
    }
    #mobile-header .mobile-bar-items {
    	-webkit-box-ordinal-group: 5;
    	-ms-flex-order: 4;
    	order: 4;
    	margin-left: auto;
    }
    #site-navigation {
    	float: none;
    	width: 100%;
    }
    
    .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    }
    
    .main-navigation .menu-item-separator {
    	-webkit-box-flex: 1;
    	    -ms-flex-positive: 1;
    	        flex-grow: 1;
    }
    
    .main-navigation .menu-item-separator a {
    	font-size: 0;
    	background: transparent !important;
    }
    
    .slideout-navigation .menu-item-separator,
    .main-navigation.toggled .menu-item-separator{
    	display: none !important;
    }
    
    @media (max-width: 768px) {
    	.inside-header>:not(:last-child):not(.main-navigation) {
    		margin-bottom: 0;
            }
    }
    
    @media (max-width: 1024px) {
        .main-navigation .menu-item-separator {
            display: none;
        }
        
        .site-header .header-image {
        display: none;
        }
        
        .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {display: grid;}
        
        .mobile-bar-items.wc-mobile-cart-items {
        display: none;
    }
    
    }
    }
    /*** END gp center logo in nav https://docs.generatepress.com/article/centering-logo-navigation/  ***/
    
    #1181614
    Leo
    Staff
    Customer Support

    Maybe it’s the last part that’s not included in our documentation?
    https://docs.generatepress.com/article/centering-logo-navigation/

    #1181628
    sparkle

    i mean, yes. that’s what i’ve been asking after. how do i make the toggle closed instead? those bits helped me take out the centered nav and get the alignment better on mobile.

    #1181634
    Leo
    Staff
    Customer Support

    Can you remove this part first?
    .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {display: grid;}

    #1181636
    sparkle

    ok. now the menu is open and horizontal. i’d like it closed and distributed vertically when it opens. does that makes sense?

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