Widget position in header

I have a small issue positioning a widget in the header on my wordpress website.

The widget needs to be positioned to the right of the font resizer widget and shouldn’t affect the social media icons. I’ve tried several CSS techniques but to no avail.

https://www.cdsbeo.on.ca/

You’ve got a lot of html there…

The reason it’s not butting up against the font resize elements is because you have the font resize elements float/absolutely positioned which take them out of the document flow.

A quick fix would be to set the site-section-header to be flex

.site-section-wrapper {
    width: 1250px;
    display: flex;
    justify-content: space-evenly;
}

And then move the location of the widget to AFTER the font resize, then remove all of the positioning on the header-risizer-widget class

.header-risizer-widget {
    width: auto;
    font-size: 15px;
}

Very interesting… I need to brush up on my knowledge of FLEX.

I added align-items: center; to the .site-section-wrapper which aligned everything nicely, including the main navigation menu.

After all that, the only small issue is that the search icon now appears on the far left above the logo…ideally it should go back at the end of the line next to the social media icons.

That’s because you have the button as the first element in the div. Move it to the end and it’ll be in the right place. You’ll need to tweak the css a bit to get it to line up

/* FYI, You've got this selector in the css twice */
#site-search-toggle {
    margin-top: -1rem;
    background-color: #195899;
    color: #fff;
    font-size: 16px;
    padding: 0px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
}

I’m so close! Seems there’s interference with the social media icons now.

Whoops. I forgot that UL is a block element. You can resolve it one of two ways:

  1. Make the UL in the nav display:inline-block
  2. Make the nav element display:flex

You’ll still need to play with the margins a bit on the search icon to get it to line up correctly, but that should get you close. Depending on where you want the search icon, you might need to move it after the UL.

1 Like

Yes this should do it:


#site-secondary-nav{
display:flex;
align-items:center;
}
#site-search-toggle{
margin:0 0 0 1rem;
order:2;
}

Screen Shot 2022-02-03 at 13.24.18

1 Like

Thanks for all the help thus far! My pre-header is looking great, but unfortunately the display: flex on the .site-section-wrapper has caused the main H1 page titles to float left of the content:

See example here: https://www.cdsbeo.on.ca/our-board/board-meetings/

Any tricks to fixing this?

ugh. You’re using site-section-wrapper in two different contexts.

Safest way would be to set site-section-wrapper to flex only if in the pre-header. So change .site-section-wrapper back to just setting the width, and add the display:flex to an additional selector

.site-section-wrapper {
    width: 1250px;
 
.site-preheader .site-section-wrapper {
   display: flex;
    justify-content: space-evenly;
    align-items: center;
}}

That did the trick, thanks!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.