Help positioning custom header widget

  • Resolved jessepistils

    (@jessepistils)


    7 years, 11 months ago

    Hello!

    I’m trying to create a custom widget area above my main navigation to include a search bar. Following your advice on a few older posts, I created the custom widget area and added the widget title class, header-right-widget.

    Then, I added the following custom CSS to my styles.css:
    .header-right-widget{
    width: 500px;
    float: right;
    }

    I inserted the widget area into my header.php file using the code below:
    <div class=”header-right-widget”><?php dynamic_sidebar( ‘header-widget’ ); ?></div>

    I’m not certain that placed the code in the correct location, however the result is a search bar that is positioned all the way at the very top far right of the page. In addition, even though the search bar widget appears, it doesn’t seem to be working – when clicked, nothing happens, and text does not appear in the search bar when typed. When accessing the site on mobile, the widget doesn’t re-size with the screen size. Since I set it to be 500px wide, it cuts off the side of the display.

    Ideally, I’d like to have this widget float on top of my main navigation, aligned to the right hand side of the page (website: pistilsnursery.com). How can I modify my code to achieve this?

    Happy to provide any and all additional info and/or screenshots.

    Thank you!
    Jesse

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author krozero

    (@krozero199)

    Hi Jesse, it’s hard to tell without looking in your site. for responsiveness please use media queries https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries .

    for “search bar not seems to be working ” can you try adding z-index: 500; .
    and for “all the way at the very top far right of the page” try adding position responsive for header wrapper element.

    is it possible post a link to your site (i’ll have to inspect the code to give you exact fix for your problem)?

    Thanks!
    Kishor

    Thread Starter jessepistils

    (@jessepistils)

    Hey Kishor,

    Thanks for your prompt response! The site is pistilsnursery.com, but I’ve removed the custom widget area code for the time being since it wasn’t displaying properly. Will inspecting the website as-is be enough, or can I provide you with any other information?

    I’ll play around with the code that you suggested, and await your response about where/how to insert the widget code in my header.php file.

    Thanks so much!
    Jesse

    Plugin Author krozero

    (@krozero199)

    https://content.screencast.com/users/kkhambu/folders/Jing/media/f324c33c-c1d9-4d21-ab9d-89f1764e7df6/00000608.png

    Jesse, if you are trying to achieve something similar to above screenshot. please paste the widget area code inside ‘<div class=”header-right-widget”>’element. bottom left in above screenshot. and add margin-top: -40px; to css. bottom right in screenshot.

    you may need some additional css to control widget break, like search button fall off, responsiveness etc things. hope this helps. thanks!

    Kishor

    Thread Starter jessepistils

    (@jessepistils)

    Thank you – I got it to work pretty well, I think, using the code you provided and a media query for screens. Could you check it out and see that everything looks okay on your end? Any last suggestions for me?

    Thank you!

    Plugin Author krozero

    (@krozero199)

    https://content.screencast.com/users/kkhambu/folders/Jing/media/c7e0a022-8ea1-4384-a696-76d5d6c4ac26/00000610.png

    yea, it looks good but vertical position seems bit off (screenshot attached). you may like to add following css (margin-top and max-width)

    .header-right-widget {
    width: 500px;
    float: right;
    margin-top: -30px;
    max-width: 100%;
}

    that should fix both vertical positioning and responsive issue. ?? tx!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Help positioning custom header widget’ is closed to new replies.

Tags