Jump to content


Photo
- - - - -

Link not working in header using hook

branding header hook link

Best Answer Jake , 21 October 2013 - 03:58 PM

Hi @richardjacruz - You can sort of force the primary branding elements behind your donate button by adding the following to your custom CSS:

 

.section-branding .branding_wrap {z-index: -1;}

 

That will bring the donate button to the forefront which will allow folks to click on it. For the hover, you could probably get away with swapping out the image on hover with something like:

 

.visit a:hover 

 

Finally, if you choose to try a different approach, the Business Branding section comes in two flavors, one for Framework and one for DMS! http://www.pagelines...iness-branding/

Go to the full post


  • Please log in to reply
19 replies to this topic

#1 richardjacruz

richardjacruz

    Advanced Member

  • Members
  • 39 posts
  • LocationWorth, IL
  • Framework Version:Latest
  • Country: Country Flag

Posted 21 October 2013 - 02:46 PM

Please look at the site at

Please Login or Register to see this Hidden Content

. I place a pair of dogtags and a phone number using a Pagelines-Cutomize hook. Unfortunately, I can't get the dogtag to link to the "/donate/" page. When I inspect the element, it appears that where I placed this covers the entire header area. Is there a way for me to get around this? I'd also like to make the dogtag animate as a rollover. I tried putting in basic HTML rollover script, but it broke the site on line 47 of the pagelines-customize/functions.php file.

 

I saw some posts about a plugin called "Branding," but I didn't see it available for Framework (only DMS). Any recommendations?

 

Thanks.



#2 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 21 October 2013 - 03:58 PM   Best Answer

Hi @

Please Login or Register to see this Hidden Content

- You can sort of force the primary branding elements behind your donate button by adding the following to your custom CSS:

 

.section-branding .branding_wrap {z-index: -1;}

 

That will bring the donate button to the forefront which will allow folks to click on it. For the hover, you could probably get away with swapping out the image on hover with something like:

 

.visit a:hover 

 

Finally, if you choose to try a different approach, the Business Branding section comes in two flavors, one for Framework and one for DMS! 

Please Login or Register to see this Hidden Content



#3 richardjacruz

richardjacruz

    Advanced Member

  • Members
  • 39 posts
  • LocationWorth, IL
  • Framework Version:Latest
  • Country: Country Flag

Posted 21 October 2013 - 08:12 PM

Cool. Thanks, Jake. Much appreciated. I kinda thought I might have to fool around with the z-index, but I didn't know how to do so. Would I add that custom CSS to the functions.php file or to the Pagelines Customize section? Sorry if that sounds like a dumb question.



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 22 October 2013 - 01:06 AM

Hi there,

 

Any css you can add to the pagelines css section inside the wp admin dashboard or into the style.css if using the base theme or customize plugin.



#5 richardjacruz

richardjacruz

    Advanced Member

  • Members
  • 39 posts
  • LocationWorth, IL
  • Framework Version:Latest
  • Country: Country Flag

Posted 06 November 2013 - 09:16 PM

I hope it's appropriate to add to this thread. For the same element on the site, is there code I can implement that would make the donate button and phone number disappear at the first responsive design breakpoint?



#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 07 November 2013 - 08:06 AM

Has the site url changed? it's no longer visble on

Please Login or Register to see this Hidden Content



#7 richardjacruz

richardjacruz

    Advanced Member

  • Members
  • 39 posts
  • LocationWorth, IL
  • Framework Version:Latest
  • Country: Country Flag

Posted 08 November 2013 - 05:47 PM

Sorry, I'm a dufus. It's now live at salutethearmedforces.org. Thanks.



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 16358 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 November 2013 - 11:47 AM

Hi,

 

If you want the donate button and contact info to be removed upon responsiveness, you will need to use @media queries and apply it to your custom CSS using the display property and value none;

 

For more information see here - 

Please Login or Register to see this Hidden Content



#9 richardjacruz

richardjacruz

    Advanced Member

  • Members
  • 39 posts
  • LocationWorth, IL
  • Framework Version:Latest
  • Country: Country Flag

Posted 10 November 2013 - 05:31 PM

I tried adding the following to the custom CSS:

 

@media all and (min-width: 995px) {
  #section-branding .branding_wrap {
    display: none;
  }
  }

 

is that correct? It didn't seem to work.



#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 16358 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 11 November 2013 - 12:10 PM

Thats almost correct. However, if you want to remove the whole branding section you will need to use this:

 

Please Login or Register to see this Hidden Content

 

However, if you wish for only the donate button and contact info to be hidden, you will need to wrap them inside a div with a unique class, then add that class to the code above, replacing the .branding_wrap class.



#11 richardjacruz

richardjacruz

    Advanced Member

  • Members
  • 39 posts
  • LocationWorth, IL
  • Framework Version:Latest
  • Country: Country Flag

Posted 13 November 2013 - 04:21 AM

Ah, so in the hook I would create a div with a class, and then I would replace "#branding" with that div instead, right?



#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 16358 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 13 November 2013 - 10:31 AM

No, don't replace #Branding, you already have a class assigned to your div called .visit so you can target that in the @media query like so:

 

 @media all and (min-width: 995px) {
  #branding .visit {
    display: none;
  }
  }
 
That should do the trick.


#13 richardjacruz

richardjacruz

    Advanced Member

  • Members
  • 39 posts
  • LocationWorth, IL
  • Framework Version:Latest
  • Country: Country Flag

Posted 14 November 2013 - 04:50 AM

Dude, that was SO awesome. Worked like a charm! Set it to "max-width" to get it to work. Thanks a million!



#14 Danny

Danny

    Is Awesome!

  • Moderators
  • 16358 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 14 November 2013 - 09:29 AM

No problem, happy to help!

 

I was just thinking you could actually wrap the div with the following classes and you wouldn't even need the Media Query.

 

In your div for the donate, contact info you have .visit as a class, next to it add hidden-phone.

 

So it looks like this:

 

[code=auto:0]

<div class="visit hidden-phone">

[/cpde]

 

By adding that class, it will make that div not be displayed when viewing on a mobile device.



#15 richardjacruz

richardjacruz

    Advanced Member

  • Members
  • 39 posts
  • LocationWorth, IL
  • Framework Version:Latest
  • Country: Country Flag

Posted 14 November 2013 - 03:36 PM

I think I may still need the media query because at the break point I set it the donate would start to cross over the branding logo. I'll save this, however, for future projects where that's not an issue. Thanks a million. Great job, brilliant mind.



#16 Danny

Danny

    Is Awesome!

  • Moderators
  • 16358 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 14 November 2013 - 03:47 PM

No problem.



#17 richardjacruz

richardjacruz

    Advanced Member

  • Members
  • 39 posts
  • LocationWorth, IL
  • Framework Version:Latest
  • Country: Country Flag

Posted 17 November 2013 - 03:14 AM

Sorry to bother you about this again. However, I noticed that now the social media links don't work because that new div overlays those buttons. Is there a fix for that you can recommend? I tried to do this:

 

.section-branding .icons {z-index: -2;}

 

to make that work, but it didn't.



#18 Danny

Danny

    Is Awesome!

  • Moderators
  • 16358 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 17 November 2013 - 12:04 PM

Hi,

 

The issue is caused by your custom CSS or hook, you will need to add custom styling to the hooks content to resolve this issue. Unfortunately, we are unable to provide support to user generated code.
 



#19 richardjacruz

richardjacruz

    Advanced Member

  • Members
  • 39 posts
  • LocationWorth, IL
  • Framework Version:Latest
  • Country: Country Flag

Posted 17 November 2013 - 02:42 PM

Since I couldn't get this to do what I wanted it to do, I purchased "Business Branded" through the store. I tried uploading it, and I'm told that it's not a valid plugin. How do I install it. The file I downloaded is section-busines-branding.zip. Inside was a folder "business branding", and inside that were a bunch of PNG files, a section.php file, a style-LESS file, and and info.txt file. Is something wrong here? I did make sure to download the Framework "flavor."



#20 Danny

Danny

    Is Awesome!

  • Moderators
  • 16358 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 18 November 2013 - 10:27 AM

Business Branding should to my knowledge install using the Wordpress Plugin installer. If this isn't the case, please create a new topic in our store forums and the developer will be notified.

NOTE: Be sure to use the prefix your topic with the correct product, this will then inform the developer of the extension.







Also tagged with one or more of these keywords: branding, header, hook, link