[Support request] Logo Position

Home Forums Support [Support request] Logo Position

Home Forums Support Logo Position

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #220055
    Andy

    Hi Tom,

    When I add a Woocommerce Product Search field to the Header widget it moves the logo over to the left so its not central anymore. Any ideas how to get around this?.

    Also, I’d like to change the search text in the button to just a search icon, not sure whether it would best to copy and edit the Woocommerce template or do it via CSS?.

    URL: http://tinyurl.com/zrtj257

    Cheers,
    Andy

    #220070
    Tom
    Lead Developer
    Lead Developer

    Hi Andy,

    Adding something to the header changes the flow of the elements.

    One solution would be making the widget absolute on desktop:

    @media (min-width: 769px) {
        .header-widget {
            position: absolute;
            right: 20px;
            top: 20px;
        }
    }

    You might have to ask WC about the button – they might have a filter you can hook into πŸ™‚

    #220132
    Andy

    Thanks Tom. CSS worked, just had to increase right to 240px.

    I forgot to ask, when on Mobile/Tablet I would prefer the widget to go below the logo, it currently sites above it.

    Is there a filter that would do this?.

    Regarding the Woocommerce search button there is a filter but if the theme has a product-searchform.php template (which GP does) then it will override the filter. So I copied the template to my child theme/woocommerce folder and then edited the html as below changing the original button to hidden:

    <form role="search" method="get" class="woocommerce-product-search" action="<?php echo esc_url( home_url( '/'  ) ); ?>">
    	<label class="screen-reader-text" for="woocommerce-product-search-field"><?php _e( 'Search for:', 'woocommerce' ); ?></label>
    	<input type="search" id="woocommerce-product-search-field" class="search-field" placeholder="<?php echo esc_attr_x( 'Search Products&hellip;', 'placeholder', 'woocommerce' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label', 'woocommerce' ); ?>" />
    	<input type="hidden" value="<?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?>" />
    	<button type="submit" class="search-submit"><span class="fa fa-search"></span></button>
    	<input type="hidden" name="post_type" value="product" />
    </form>

    Thought this may help someone.

    #220241
    Tom
    Lead Developer
    Lead Developer

    Thanks for the snippet!

    You can change the order of the header items with this function: https://gist.github.com/generatepress/4cfa628cec96088dcbf8dd8cf399b83e

    You might need to adjust some CSS, but that should get you on your way πŸ™‚

    #220350
    Andy

    Hi Tom,

    I added the php to my child themes functions.php file but it doesnt appear to have made any difference?.

    Any help appreciated.

    Cheers.

    #220383
    Tom
    Lead Developer
    Lead Developer
    #220386
    Andy

    Haha, whoops, that might help. Sorry, I was working on another site at the same time and looks like I added the function then forgot to change the order. Its working great now thanks Tom.

    #220387
    Tom
    Lead Developer
    Lead Developer
    #221189
    Andy

    Hi Tom,
    Sorry to drag this up again. The absolute positioning for the logo works fine on my 20inch 1680×1050 desktop but if you resize the browser window eventually the widget begins to overlap the logo as you can see in the screenshot below:

    http://prnt.sc/ca9g5r

    This means the widget wont be correctly positioned on a tablet in landscape mode.
    I could add multiple media queries for different screen resolutions and adjust the right property but that could get a bit messy, so was wondering if you had a better method?

    #221224
    Tom
    Lead Developer
    Lead Developer

    Unfortunately that’s the downside to using absolute positioning.

    Without it, the header widget will push the logo over a bit and won’t allow it to center properly.

    One solution might be to just center the header widget below a certain media query.

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