[Resolved] how to position a custom hook where i want it?

[John]

Hi Tom

i am wondering how i can use css to position the custom hook (after header content)

right now it pushes my whole header down (which i dont want) but also i want to raise it up higher and move it to the right.

essentially another option would be if there is a way to add a second header widget, as I am already using the header widget
Or
if there is a way to position one of the text boxes in my header widget separate form the other one.

thanks!

[Tom]

Hi there,

How do you want your header widgets positioned? Next to each other?

You can try putting your div in the Before Header Content hook, and then floating it to the right?

<div class="secondary-header-widget">
      Stuff in here
</div>

Then add this CSS:

.secondary-header-widget {
      float: right;
}

Let me know 🙂

[john]

Hi Tom

thanks! I want it to show up under the title and tag line?

this puts it above that if i float it left. and if i then add margin to it to push it down, it also pushes over the title and tagline to the right as well.

if i put the code in the after header content, its adds some more space to the whole header so its too far down.

thanks!

[Tom]

If you want it to show up below your title/tagline, why not place it in “After Header Content” and remove any floats?

That should do it? Let me know 🙂

[john]

i did that but it shows up too low and makes the header larger… taller) i need to move it UP from where it is if i add it to the after header content hood how do I do that (see me previous email if you want to check the site)

thanks a lot!

[Tom]

Can you possibly re-send your site to support@generatepress.com so I can see what you mean?

[Tom]

Sorry for not getting back to you sooner.

Give this a try:

@media (min-width: 769px) {
      .secondary-header-widget {
            float: none;
            margin-bottom: 0;
            position: relative;
            top: -60px;
            left: 80px;
      }
}

[john]

thanks I think that will take me to where i want to go. i will post back my results. Do you have a sense of how I could make some text appear within the Mobile menu bar ( I am making it sticky on mobile using the sticky header or anything plugin)

i was tying to drop this phone number down into the bar when i scroll down but it does work like that unless its at the top and then it scrolls overtop the title?

if i should open a new topic just let me know and sorry if thats an issue

thanks so much tom. I will be sending you an extra donation for all your help!

[Tom]

Ignore what I said above – not sure what I was thinking.

A much better way of doing this is explained here: http://generatepress.com/forums/topic/formatting-text-in-header/#post-108188

As of right now, there’s no way to add anything else in the mobile menu.

However, I just made an adjustment so that you can insert something into the mobile menu in version 1.2.9.7.

You could do something like this:

add_action( 'generate_inside_mobile_menu', 'generate_add_mobile_menu_content' );
function generate_add_mobile_menu_content()
{
	echo '<span class="mobile-content"><a href="tel:123-4567">Call me</a></span>';
}

Then you could float that to the left:

.mobile-content {
      float: left;
}

Again, this won’t work until GP 1.2.9.7.

[john]

great thanks! ow long does it take for that to come out

cheers!

John

[Tom]

1.2.9.6 is currently being reviewed.

It usually takes about 10 days (ugh) for WP.org to review theme updates and release them.

Once 1.2.9.6 is out, it will probably take about a week or two for 1.2.9.7 to be uploaded.

[John]

hi Tom, thanks! any chance i could get a copy by email?

[Tom]

Sure, give me a shout at support@generatepress.com 🙂

[Chris]

I got this to work last week and I was able to insert an additional image and text to the right of the site logo. I inserted this code using the GP Hooks in “After Header Content” area. It worked perfectly!

<div class="secondary-header-widget">
<table cellpadding=0 cellspacing=0 border=0>
<tr><td class="headtagfont">Brought to you by <b><a href="http://aroadbike4u.com/" target="_blank">A Road Bike 4U</a></b><br> Orange County's premier road bike shop.</td>
	<td valign=middle><a href="http://aroadbike4u.com/" target="_blank"><img src="http://www.roadbikeoc.com/img-lib/ARB4U_logo_01_174x58.png" width=174 height=58 border=0></a></td>
	<td width=40></td></tr></table>
</div>

Looked at it today and that widget is now displayed below the site logo instead of to the right? I haven’t changed anything since last week. Why is it doing this?

http://www.roadbikeoc.com/

[Chris]

FYI, I checked the “Hide site title” and “Hide site tagline” options in the Header Content area as you advised.

[Author]

Posts