Social Network Button on menu bar

[ShaneTFletcher]

Hi all, if I dont ask I wont know so here we go..

I am struggling to insert a social network button onto my menu.

Here is my coding on my template file -

PHP Code:

<div id="menu-wrapper">
        <div id="menu" class="container">
            <ul>
                <?php get_navigation(return_page_slug()); ?>        
            </ul>
        </div>
    </div> 


And here is my menu style in css -

/* Menu */
#menu-wrapper {
overflow: hidden;
height: 53px;
background: #40745E;
}
#menu {
overflow: hidden;
height: 52px;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline-block;
}
#menu a {
display: block;
padding: 0 30px;
line-height: 52px;
border: none;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
color: #FFFFFF;
}
#menu a:hover, #menu .current_page_item a {
background: #325A49;
text-decoration: none;
color: #FFFFFF;
}
#menu li.current {
background: #325A49;
}

Can someone shred some light on how to insert the social network button I have onto the menu, right side of menu.

Thanks

[Psychosopher]

Where do you want insert the button? In the menu? In a page, in the footer section or in a sidebar?

[ShaneTFletcher]

On the actual menu bar, right side.

The website will soon be live if you need a website example. I am working on a localhost at the moment.

[Psychosopher]

The easiest way is to add an additional menu entry. For example like this

Code:

<div id="menu-wrapper">
        <div id="menu" class="container">
            <ul>
                <?php get_navigation(return_page_slug()); ?>
                <li>
                    <a href="http://www.socialnetwork.com/my-account"><img src="http://www.mydomain.com/socialnetwork-logo.jpg"></a>
                </li>
            </ul>
        </div>
</div>

[ShaneTFletcher]

The way you have told me didn't seem to work.

Any way to do this via CSS and do a div which is attached to the menu div?

[Psychosopher]

What does not work?

Can you add perhaps a print screen how it looks.

[ShaneTFletcher]

Here is the link - http://c-ccb.web44.net/

I haven't placed the code in this template just yet but I was trying in the localhost.

As you can see, I want a LinkedIn button on the right side of that menu bar. I will try and place the code in again and see what happens this time.

---

Update - Ive got the button placed in the menu section now.

How can I align this to the right of the menu?

[Timbow]

I think that theme is behaving strangely when you narrow the browser window so that a scroll bar appears at the bottom.

Not what you were asking about I know. It's to do with 'overflow: hidden;' in the css in the wrong place.

[Psychosopher]

How can I align this to the right of the menu?

Add a new class to the CSS like:

Code:

.right {
    position:absolute;
    right:0;
}

Add the class to the tag:

Code:

<li class="right">
    <a href="http://www.socialnetwork.com/my-account"><img src="http://www.mydomain.com/socialnetwork-logo.jpg"></a>
</li>

Perhaps you have also to define the position and width of the menu bar.

[ShaneTFletcher]

Yey, thanks guys!

For the theme behavior, thank you for pointing that out! I worked on the full screen in Google Chrome and Firefox. I've checked other browsers in full screen but never checked windows screen.

I will look into that straight away

Thanks again for your solution for the social button and finding an issue with the template.

[ShaneTFletcher]

I was unable to fix the issue with the template. I added a width and position of the menu but no luck.

[Psychosopher]

I was unable to fix the issue with the template. I added a width and position of the menu but no luck.

There are a lot of width definitions with px in the CSS. For example for the classes "container" or the boxes or the IDs for the header and the footer.

Try to play with % instead of px.

[WebDevandPhoto]

@ShaneTFletcher
My theme plugin does this automatically for you (add in social icons):
http://get-simple.info/forums/showthread.php?tid=4324

And the theme is based on Foundation Responsive SCSS framework by Zurb... you can do a lot with it.
Will save you a whole lot of trouble since it already has a good grid system in place.

[ShaneTFletcher]

Hi WebDevand,

I actually looked at your theme and downloaded it yesterday.

I am actually learning about Zurb myself as your theme is amazing on all views on devices.

The social button how is actually done but having issues with making the website fixed to allow scrolling without making the menu go all weird.

I will however take notes on the foundation of different themes, such as your theme with Zurb to give my customers a better look, feel and greatness to there website.

[WebDevandPhoto]

Awesome, yea Zurb's a favorite of mine out of all the other responsive frameworks I've played with to date.

Menus tend to get weird when the browser is sized down under about 525px wide or so.
What you can do is wrap on menu for normal to large screens with a media query for when you want it to show and then have another menu to show when under 525 px. Use display:none for the tiny menu until you hit your designated media query and then make the larger menu disappear. This will allow you to have greater control (using CSS media queries) of your theme when dealing with all these different screen sizes. But yea menus are a pain sometimes. Just an idea.

[ShaneTFletcher]

Zurb seems to be great but I just found that the new Dreamweaver CS6 update supports a liquid web maker, making your website compatible to all devices and looks amazing

[WebDevandPhoto]

Zurb 4 was just released today btw. Yea the liquid templates in DW look good. I just prefer the power of a complete and well developed framework.

[ShaneTFletcher]

Sorry, not liquid but fluid. School boy error here.

Any documents to show how to develop in Zurb?

I actually looked onto Zurb today and found the new version 4 and downloaded it

[WebDevandPhoto]

Yea version 4 is wicked cool, the changes they made to their jQuery elements and going Mobile first was brilliant.

I'm trying to pick up on their SASS options:
http://foundation.zurb.com/docs/sass.html
and implement it with PHPSass:
https://github.com/richthegeek/phpsass