• Home
  • Blog
  • Showcase
  • Setup Docs
    • Sunshine Help
    • Flex Help
  • Support
    • Support Area
    • Contact us
    • Feedback
  • Connect
    • Newsletter
    • Twitter
    • Facebook
  • My Account
  • Flex
  • Sunshine
Support : Simple Pro Themes

Support : Simple Pro Themes

[Resolved] Search form in line with header

If you have purchased a product, please enter the email address that you used to register at time of purchase.
Log In
Lost Password

Create an Account
  • Your username must be unique, and cannot be changed later.
  • We use your email address to email you a secure password and verify your account.

Support › Forums › Flex Theme › Search form in line with header

Tagged: header, search form

  • This topic has 5 replies, 2 voices, and was last updated 5 years, 11 months ago by Chinmoy Paul.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 18, 2016 at 2:21 am #1117
    nomad_jess
    Participant

    Hi there,

    I’ve recently changed my header and I’d like the search bar to appear to the right of it, similar to the Magazine layout example on your site. I’ve tried playing with CSS but so far I haven’t been able to get the search bar to appear inline with the header. Could you please assist?

    Thank you so much,

    Jess

    July 18, 2016 at 2:28 am #1118
    Chinmoy Paul
    Moderator

    Share your site URL once.

    July 18, 2016 at 2:29 am #1119
    nomad_jess
    Participant

    Whoops, sorry! It’s http://notesofnomads.com

    July 18, 2016 at 3:10 pm #1121
    Chinmoy Paul
    Moderator

    Your style.css file have unwanted text. Remove following lines

    Don't show header image in mobile view

    Edit the existing CSS with new one:

    1. Go to line number 1331 and replace old code with this code

    .title-area {
        float: left;
        max-width: 400px;
        padding-left: 10px;
        padding-top: 10px;
    }

    2. Go to line number 1376 and replace old code with this code

    .site-header .widget-area {
        float: right;
        margin-left: 30px;
        margin-top: 8px;
        max-width: 400px;
        text-align: left;
        width: 100%;
    }
    July 19, 2016 at 1:08 am #1123
    nomad_jess
    Participant

    Thank you so much! That’s great.

    With the don’t show header image in mobile view, I removed all of this:

    Don’t show header image in mobile view

    @media only screen and (min-width: 400px) {
    .site-header {display:none}
    }

    Is that correct?

    August 3, 2016 at 2:12 am #1152
    Chinmoy Paul
    Moderator

    Yes.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.
Log In

Copyright © 2022 · Simple PRO Themes for Genesis Framework · About · FAQs · Contact · Affiliates