- This topic has 23 replies, 3 voices, and was last updated 2 years, 11 months ago by
Tom.
-
AuthorPosts
-
February 24, 2020 at 11:24 am #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?
February 24, 2020 at 6:13 pm #1175829Tom
Lead DeveloperLead DeveloperHi 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 29, 2020 at 8:56 am #1180721sparkle
ok. i’m getting closer to what i want. how do i make the hamburger toggle closed by default at the breakpoint?
February 29, 2020 at 4:52 pm #1180934Leo
StaffCustomer SupportI’m confused.
It should be closed by default.
Can you disable all caching plugins so I can take a closer look?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 1, 2020 at 4:55 am #1181201sparkle
hmmm. i don’t have any caching plugins installed on this one. happy to give you access if that helps.
March 1, 2020 at 9:15 am #1181497Leo
StaffCustomer SupportLooks like something called Event Espresso?
Can you just disable all plugins except GP Premium for now?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 1, 2020 at 9:39 am #1181513sparkle
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.
March 1, 2020 at 11:34 am #1181575Leo
StaffCustomer SupportThat’s just super strange.
Can you switch to the parent theme to eliminate any errors in the child theme?
Any other custom functions added?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 1, 2020 at 11:38 am #1181580sparkle
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; }
March 1, 2020 at 11:41 am #1181586Leo
StaffCustomer SupportThat’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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 1, 2020 at 11:51 am #1181601sparkle
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/ ***/
March 1, 2020 at 11:57 am #1181614Leo
StaffCustomer SupportMaybe it’s the last part that’s not included in our documentation?
https://docs.generatepress.com/article/centering-logo-navigation/Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 1, 2020 at 12:18 pm #1181628sparkle
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.
March 1, 2020 at 12:26 pm #1181634Leo
StaffCustomer SupportCan you remove this part first?
.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {display: grid;}
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 1, 2020 at 12:31 pm #1181636sparkle
ok. now the menu is open and horizontal. i’d like it closed and distributed vertically when it opens. does that makes sense?
-
AuthorPosts
- You must be logged in to reply to this topic.