[Resolved] Search Alignment In Header

Home Forums Support [Resolved] Search Alignment In Header

Home Forums Support Search Alignment In Header

  • This topic has 29 replies, 3 voices, and was last updated 6 years ago by Leo.
Viewing 15 posts - 16 through 30 (of 30 total)
  • Author
    Posts
  • #338915
    Tom
    Lead Developer
    Lead Developer

    You mean on mobile?

    You could try reducing the header padding on mobile:

    @media (max-width: 768px) {
        .inside-header {
            padding-left: 10px;
            padding-right: 10px;
        }
    }
    #339839
    johnzoro

    ok can i change the text size to smaller?

    Would that make the search box smaller? and the search button

    #340501
    Tom
    Lead Developer
    Lead Developer

    Not sure that would do anything. It looks good to me right now – can you show me a screenshot of what you’re seeing?

    #343053
    johnzoro

    View post on imgur.com

    I want it looking similar to this on mobile view

    #343169
    Tom
    Lead Developer
    Lead Developer

    Which part of it? Your logo is above and your search is below and full width? Looks pretty similar to me?

    #360709
    johnzoro

    View post on imgur.com

    Sorry for the late reply.

    I want rhe greatest reviews logo smaller slightly and left aligned.

    Similar to the screenshot of amazon and ebay

    Can i have a magnifying glass instead of the word search

    #360712
    johnzoro

    View post on imgur.com

    This is how it looks currently

    #361158
    Tom
    Lead Developer
    Lead Developer

    Add this CSS:

    @media (max-width: 768px) {
        .site-header .site-logo:not(.sticky-logo) {
            margin-left: 20px;
            margin-bottom: 10px;
        }
        .site-logo:not(.sticky-logo) img {
            max-width: 100px;
        }
    }
    
    input.search-submit {
        font-family: FontAwesome;
        padding: 13px;
    }

    Then this PHP:

    add_filter( 'generate_search_button','tu_custom_search_button' );
    function tu_custom_search_button() {
    	return '';
    }

    Of course, I can’t design your header to match Amazon, but this should definitely get you closer 🙂

    #361260
    johnzoro

    https://www.greatestreviews.co.uk/

    that’s made the logo smaller but not left aligned?

    also i don’t seem to have a magnifying glass only a box?

    do i need to install a font or an icon or something?

    also how do i get 1.4?

    #361944
    Tom
    Lead Developer
    Lead Developer
    #361981
    johnzoro

    I am a plumb!

    User error!

    You are right tom and i am stupid.

    It is working now.

    Can i be a pain in the backside? the input box looks slightly bigger than the search button. is there a way to make that smaller so they are the same height?

    if it’s too much work then don’t worry

    #361994
    johnzoro

    Also now the logo on the transparent menu looks a bit funny like the dimensions aren’t right

    Im not sure if you can see it on this screenshot

    View post on imgur.com

    #362254
    Tom
    Lead Developer
    Lead Developer

    Just made a couple more adjustments to the CSS above that should take care of that: https://generatepress.com/forums/topic/search-alignment-in-header/page/2/#post-361158

    #528131
    johnzoro

    err sorry to bump an old thread tom, but how would i adjust the css to make the search box right aligned on desktop view?

    #528453
    Leo
    Staff
    Customer Support

    It’s inserted as the header widget so I think simply remove the CSS should work.

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