Parallax Pro – Add Icons Inline with Navigation Menu

[Michele]

Hi All

I suspect the answer to my question is staring me in the face. Unfortunately, I can not seem to make any tweaks that help.

I would like to implement a similar Header effect as seen here: http://www.reneecarlino.com -- Navigation and Social Media Icons on the same line!

Test Site: http://www.colibrifit.ch/wp

Thank you in advance for your help!

Cheers!

http://www.colibrifit.ch/wp

[Genesis Developer]

Try following CSS

.widget.simple-social-icons {
    display: inline-block;
    float: right;
    margin-top: 9px;
}

.widget.widget_nav_menu {
    display: inline-block;
    width: 760px;
}

And go to line 2129 and change the width: 80% to width: auto

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[Michele]

Hi Glenrock

That did seem to solve the problem once I corrected a typo! Bravo and Many Thanks!

One last question. The .responsive-menu-icon ( the three horizontal lines) is no longer tracking to center

Can you help me with that?

Cheers!!

[Michele]

Hello All

Although the feedback from Glenrock provided "visual" appeal ( thank you again for the help), the header did not behave according to the sample provided: http://reneecarlino.com/. The menu itself lost all responsiveness and did not remain centered above the icons.

I would really like that my header behaves "identically", if possible, to the sample site. I just can not get myself there.

For testing purposes, I set-up the header with the same two elements as in the example site without trying to make tweaks.
I added he Navigation menu and a text widget in the "Header Widget"

Can anyone help achieve the same effect on my site: http://www.colibrifit.ch

Thank you again for your help!!

[jhs]

Hi!

I would really like the navigation and social media icons on the same line too, like Michele describes.
I've added the code below to my css, and dragged the Simple Social Icons into the Header Right widget area. And this is what it looks like on my site now.

.widget.simple-social-icons {
    display: inline-block;
    float: right;
    margin-top: 9px;
}

.widget.widget_nav_menu {
    display: inline-block;
    width: 760px;
}

I didn't quite understand the thing about the

And go to line 2129 and change the width: 80% to width: auto

Could anybody give me some hints on that please?

[jhs]

This reply has been marked as private.

[kilerb]

Hi, it looks like the answer might have been marked private. Was hoping to do what they were saying above... Just like on this site... http://reneecarlino.com/
I tried the code above but it didn't put the icons to the right of the menu. Any ideas? Thanks!!!! 🙂

[Author]

Posts