[Resolved] Hook Alignment

[Paul]

Can you tell me why the before header hook here – http://style960.com/smb aligns outside of the container width between 768 and 1200px only?

Below 768px or above 1200px the alignment is fine.

Thanks,
Paul.

[Leo]

Hi Paul,

Not quite sure what you mean? This is what I’m seeing around 1060px and looks like it’s within the container?
https://s4.postimg.org/hnn7hm1pp/beforeheadercontainer.png

[Paul]

Hi Leo,

The content in the before header hook (ending with the social icons list) is aligned further to the right than the last main menu item – how can I have that content pad the same as the menu so they align with each other?

Thanks.

[Leo]

Hmm try adding grid-container grid-parent with smb-before-header instead of inside-smb-before-header

Then you apply the same header padding (as shown in screenshot) to that container so they match.

[Paul]

That moves that div to the left, doesn’t span the window. Unable to correct with a margin setting.

[Leo]

Can you simply try this in the Before header hook? I just tried this and it should work:

<div class="before-header grid-container grid-parent">
        Your before header HTML content here
</div>

[Paul]

That gives me the same result I described above

[Paul]

SMB

[Leo]

Any chance you can leave the code in there so I can see why it’s not working on your end?

This is the result when I try on my end: http://www.screencast.com/t/6yY4wgQELUe

You can see that everything is within the container.

[Paul]

Ok I’ve rewritten the HTML as suggested:

hook does not span the width of the window above 1025px
content of the hook does not align with the main menu above the 767px breakpoint

This might be an error in my css, but some hook examples – the html and css required – might be useful in the docs.

[Leo]

I thought you didn’t want the bar to span the entire window?

And yeah there seem to be a lot of CSS in there. Here are some pointers:

You shouldn’t need this one as it’s the same as using grid-container:

.smb-before-header-desktop {
    max-width: 1100px;
}

Here are GP’s responsive breakpoints: https://generatepress.com/forums/topic/how-do-i-search-for-my-previous-posts/#post-263744

Make use of the built in classes: hide-on-mobile hide-on-tablet hide-on-desktop

If you want the edges to line up then the left and right padding needs to be removed:

.smb-before-header {
    padding-left: 0;
    padding-right: 0;
}

[Paul]

Re-written the html and css, both are now reduced but still can’t get this to align properly. I had to add another breakpoint in the css of 1200px. But resize between 1100px and 1200px and you’ll see the content of the hook does not align with the main menu.

Really struggling with this, spend hours on a hook with a phone number, and email address, and some social links in.

As I said previously, some working examples of hooks would be useful for myself and others.

[Leo]

Try removing this: <div class="grid-container grid-parent">

and added with this: <div class="smb-before-header-content grid-container grid-parent">

Then adjust the CSS to this:

@media (min-width: 768px) {
    .smb-before-header-content {
        padding-right: 40px;
        text-align: right;
        padding-left: 40px;
    }
}

Shouldn’t need this piece either:

@media (min-width: 1200px) {
    .smb-before-header-content {
        padding-right: 0px;
        text-align: right;
    }
}

There are too many examples of what can be done with hooks and the CSS to go with it so I don’t think we can cover what everyone has in mind using examples.

[Paul]

I think we have crossed wires here. I’ve changed the html & css as you suggested but I’m then left with the content breaking onto a second line on a mobile using portrait orientation, and between 768-1024px the content jumps to the left before aligning to the right above 1024px.

I’ve changed the html & css back again.

If the screen is too small to show phone number, email address, and social icons, I drop the email address and center the content – this works.

If the screen is large enough to display all three then the content is right aligned – but in line vertically with the content below it i.e. – the main menu links.

This all works apart from between 1100 and 1200px.

[Leo]

There is nothing in GP’s grid system or media query that changes how things are displayed between 1100 to 1200px.

It’s difficult for me to tell why things aren’t working if you don’t leave the code in there.

Here is the result I see at 1180px using the structure I suggested: https://s1.postimg.org/yfv2otcq7/lineup.png

As you can see that things are lining up.

It might need a little more tweak for the responsive issue but can you leave the code so I can see what’s causing the problem?

[Author]

Posts