• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Custom Header Right Widget Area in Genesis

This post follows on from this previous post about how to Conditionally Remove the Header Right Widget Area in Genesis

Here’s the code to conditionally replace the header right widget area with a custom widget area.

Register for full access

Reader Interactions

Comments

  1. WWHaT says

    February 17, 2017 at 8:22 am

    Hi, how could I Custom Header Right Widget Area , set the same theme as the previous Header Right Widget Area. Thank you.

    Log in to Reply
    • Brad Dalton says

      February 17, 2017 at 8:35 am

      Sorry but i don’t understand.

      Log in to Reply
      • WWHaT says

        February 17, 2017 at 9:00 am

        I remove_header_widget’ that is type as menu and is Horizontal arrangement , but my new Custom Header Right Widget is Vertical arrangement . how to make the new Custom Header Right Widget has same format as as menu and is Horizontal arrangement ?

        Log in to Reply
        • Brad Dalton says

          February 17, 2017 at 9:16 am

          Link to the site please.

          Log in to Reply
          • WWHaT says

            February 19, 2017 at 7:24 am

            http://www.girlsyouareloved.com/
            Custom Header Right from the woo commerce page, I have recover the Header Right menu. I hope my Header Right menu type would be same as it. thank you.

          • Brad Dalton says

            February 19, 2017 at 7:26 am

            This is NOT something i have written about.

          • Brad Dalton says

            February 20, 2017 at 4:33 pm

            Also try this new tutorial

          • WWHaT says

            March 4, 2017 at 12:54 am

            Sorry, I still have some problem,
            I used the Pretty Chic theme version 3.1 for my website.
            web site : http://www.girlsyouareloved.com/shop

            I add the following code
            //* Add WooCommerce header_widget
            add_action( ‘genesis_header’, ‘add_woocommerce_header_widget’ );
            function add_woocommerce_header_widget() {
            if ( is_woocommerce() or is_checkout() or is_account_page() or is_cart() or is_product() or is_shop() ) {
            genesis_widget_area( ‘woocommerce-header-right’, array(
            ‘before’ => ”,
            ‘after’ => ”,
            ) );
            }
            }

            genesis_register_sidebar( array(
            ‘id’ => ‘woocommerce-header-right’,
            ‘name’ => __( ‘WooCommerce Header Right’, ‘genesis’ ),
            ) );

            the new Custom Header Right Widget is Vertical arrangement and all color is pink,
            it doesn’t use Pretty Chic theme. It’s also make the shop page sub menu disappear.
            What can I do to make the Custom Header have same type,and not don’t make the shop page sub menu disappear. thanks!

            (the image before and after I add this code
            https://docs.google.com/document/d/1c_8p9Htw-GLfUF4RYTq-ERJyKUG1dMa8wm6AylbyTyE/edit)

          • Brad Dalton says

            March 4, 2017 at 1:26 am

            Are you referring to the code in this post? https://wpsites.net/web-design/show-different-menu-title-tagline-header-widget-on-all-woocommerce-pages/

            Because the video proves it works perfectly.

          • WWHaT says

            March 4, 2017 at 9:32 am

            Hi, I have clearly read that post
            but I have used this code for my sub-menu,as following code

            //* Hook WooCommerce menu after header conditionally
            add_action( ‘genesis_before_content_sidebar_wrap’, ‘woocommerce_shop_page_menu’, 12 );
            function woocommerce_shop_page_menu() {

            if ( ! class_exists( ‘WooCommerce’ ) )
            return;

            if ( is_woocommerce() or is_checkout() or is_account_page() or is_cart() or is_product() or is_shop() ) {
            genesis_nav_menu( array(
            ‘theme_location’ => ‘woocommerce-menu’,
            ‘container’ => false,
            ‘depth’ => 1,
            ‘fallback_cb’ => false,
            ‘menu_class’ => ‘genesis-nav-menu wrap nav-primary class’,
            ) );
            }

            }
            //* Remove nav-menu from WooCommerce page
            add_action(‘get_header’, ‘child_remove_genesis_do_nav’);
            function child_remove_genesis_do_nav() {
            if (is_woocommerce() or is_checkout() or is_account_page() or is_cart() or is_product() or is_shop()) {
            remove_action( ‘genesis_before_content_sidebar_wrap’, ‘genesis_do_nav’ );
            }
            }

            And the top menu use custom_header_widget,
            the new Custom Header Right Widget is Vertical arrangement and all color is pink,
            it doesn’t use Pretty Chic theme. It’s also make the shop page sub menu disappear.
            What can I do to make the Custom Header have same type,and not don’t make the shop page sub menu disappear. thanks!
            Is it necessary to add new menu to solve this questions?
            and I have add a new one already,should I add new second menu?

            (this web site is image for my questions
            https://docs.google.com/document/d/1c_8p9Htw-GLfUF4RYTq-ERJyKUG1dMa8wm6AylbyTyE/edit )

          • Brad Dalton says

            March 4, 2017 at 5:56 pm

            Please ask this question on the other tutorial.

            All code is tested and works as shown in the video demo.

            Otherwise, you have a problem with the code in your theme.

          • WWHaT says

            April 22, 2017 at 3:19 am

            Sorry, and again to ask you,previously your reply was also read in detail,but on this code and about my theme is still a little problem.
            Website using Pretty Chic theme version 3.1
            Web site : http://www.girlsyouareloved.com/shop
            There are currently installed style plugin.
            At the top of the menu, the site uses the code in the tutorial,
            But the format on the menu is sorted vertically downwards and the colors are all pink.
            In the original header_widget, the sorted format is sorted horizontally to the right,
            How to adjust the code to the same original header_widget format?
            Also ask whether such a question is related to the style.css setting?

            The following is a description of the screenshots before and after adjustment
            https://docs.google.com/document/d/1c_8p9Htw-GLfUF4RYTq-ERJyKUG1dMa8wm6AylbyTyE/edit
            Thank you!

          • Brad Dalton says

            April 22, 2017 at 3:28 am

            When i check your site it displays inline whereas your before and after images indicate it displays vertically.

            Have you tried using display: inline; or display: inline-block;

            CSS is not covered under membership. You should understand basic CSS if you are a webdesigner.

          • WWHaT says

            April 25, 2017 at 4:30 am

            Sorry, I tried to set the site chlid theme style.css header to display: inline; or display: inline-block ;.
            However, the menu arrangement does not change,
            Should I add a custom_header_widget project in the style.css file?
            or how do I set up the display in style.css?

          • WWHaT says

            April 25, 2017 at 6:34 pm

            The following file is add inline to style.css I have been working on the process

            https://docs.google.com/document/d/1c_8p9Htw-GLfUF4RYTq-ERJyKUG1dMa8wm6AylbyTyE/edit

            Thank you!

          • Brad Dalton says

            April 26, 2017 at 12:19 am

            Please ask all support questions using Facebook messenger https://wpsites.net/wordpress-support/ and link to a live site so i can inspect the CSS

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags