Infinity Pro – Addition to header area

[SociallyExceptional]

Hello! I have been playing with CSS for my header area, but coming up a bit short.

What I need to do is place a button on the Top Right area of the header here on this site. I keep getting it everywhere but the header area! https://mfaplan.com/

Any suggestions are welcome. Thank you!

https://mfaplan.com/

[andytc]

In the childthemes functions.php , find line 123 - and comment it out (by adding 2 forward slashes) to show the header right widget area - as below

// Remove header right widget area.
//unregister_sidebar( 'header-right' );

Now got to widgets and find your new Header Right Widget area - Add a custom HTML widget and add your button code , leave the widget title blank (unless you want something there) -

For example -

<a class="button" href="#front-page-2">Start Your Journey</a>

There are no existing styles for the header right widget area in the childtheme , so we must add them. Adjust to suit your needs -

NOTE - We should change the nav-primary menu width from 60% > 100% - if you don't change this , it'll all be bunched up and look terrible. You can adjust that to suit , but try the 100% first.

Add the styles below into the additional CSS box in the customiser section and adjust to suit your needs -

.nav-primary {
  width: 100%;
}

.widget-area.header-widget-area {
  float:right;
  padding: 20px;
}

@media only screen and (max-width: 800px) {

  .widget-area.header-widget-area {
   float: none;
   text-align: center;
  }

}

Don't forget to clear your browser cache if you don't see the css changes

[SociallyExceptional]

Thank you very much! This worked great.

I apologize for the late response, as I was out of town and just was now able to do this.

[Author]

Posts