Styling Infinity Pro Theme Header to look like Elegance's

[olga.kwak]

Hello Studiopressers!

I'm building a new website for a client and am using the Infinity Pro theme, except she really likes the look of the Elegance theme's header.

Any advice on how to go about doing that? Building this would be a fun challenge as it would give me an opportunity to dive deeper into the workings of WordPress and Genesis. Any help to start would be much appreciated!

[Victor Font]

The Elegance theme uses 5 areas to style the header.

Site Header (center)
Primary Nav (left top)
Secondary Nav (right top)
header-left widget area (left bottom)
right-header widget area (right bottom)

You have to create the two widget areas in functions.php. The easiest way to get the styling is to copy it from the Elegance theme. If you don't have access to the theme, open the demo, view the page source, and open the style sheet in the source window. You can copy whatever CSS you need.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[olga.kwak]

Hi Victor!

Thanks for the push in the right direction. I'm using my own personal website as a test environment and have hit a roadblock I'm hoping someone can help me troubleshoot.

Have a look: http://olgakwak.com/

I've registered the left and right menus and the widget areas for beneath the two spaces, but the CSS is conflicting. I'm hesitant to remove large parts of the original CSS from the Infinity Pro child theme (I prefer to use Simple CSS to add the code.) I'm wondering though if that won't work. Something's clearly conflicting and so I wonder if I should remove all of the original nav CSS from the Infinity Pro stylesheet.

Thoughts? Thanks!

[Author]

Posts