15 replies to this topic

[dawsonbarber]

Hi there As the title suggests, I'd like to be able to essentially have a two column header section - with the logo on left and the navbar, social icons, and search bar on the right, "stacked" on top of each other (essentially, three rows on the right-hand side into which I could drop the navbar, social, and search). I know there are options for "splitting" the header section into columns (universal sidebar being one) but not sure how to move the navbar into the right side along with social and search on top of one another.

[catrina]

By "splitting" are you referring to the Grid System as outlined here?:

Please Login or Register to see this Hidden Content

[dawsonbarber]

Hi Catrina Yes, I'm guessing that I'd be using nesting and offsets? Still trying to fully wrap my head around the Grid System. If yes to the nesting and offsets, how do I then "drop" the social icons and search bar into the spans on the right?

[catrina]

If you're going to be using the nesting, there is no way to actually drop the social icons and search bar into the spans unless you use HTML code (linked image tags for social icons and the HTML code for the search form itself). PHP can't be used inside the span tags because it won't show up properly on the page.

[dawsonbarber]

I don't have to use nesting, but if PHP can't be used inside span tags because it won't show up properly then I guess that the grid is not the answer. What do you recommend that I do? I've played around with the Content Box and with the Universal Sidebar, but am not sure that either supports PHP.

[Rob]

Dawson, the default structure of Framework's header area is a Branding (logo), the social icons, then below, the Nav Classic. The positioning of the social icons can be done with settings. The positioning of the Branding logo can be done with CSS. The menu can be replaced with NavBar, but both should have the search bar built in. Either menu can be aligned right, though Nav Classic requires some CSS. The only issue I'm seeing in your request is possibly that you want the search bar stacked rather than in line with the navigation. If that's the case, the method would be to implement a sidebar between other stacked elements and add a search widget there, using CSS to float it right. That works, but you need to have a position set, then apply z-index to make the search field functional. You said: "I know there are options for "splitting" the header section into columns (universal sidebar being one) but not sure how to move the navbar into the right side along with social and search on top of one another." I've never seen such options. However, if using the NavBar, then go to Dashboard > PageLines > Site Options > NavBar and use the settings for Standard options to align the menu right and if desired, hide the search field.

[dawsonbarber]

Hey Rangelone Are there any other options for adjusting social icons positioning - other than those found within the Branding Section under Social Icons Position? It occurred to me that I may want to, on some websites, drop them into the footer. When you say "the menu can be replaced with NavBar," are you referring to the different options under Drag & Drop( i.e, Nav Classic, NavBar, BrandNav, and Secondary Nav) - or is there another menu option that I'm overlooking? As far as my comment about "splitting" the header section into columns, all I mean is that I know that there are options/ways in a general sense (e.g., adding a Universal Sidebar to the header and a text widget with some HTML in it to the Universal Sidebar or dropping in a Content Box). Cheers

[catrina]

To adjust the social icons' position in branding, you'll need to use custom CSS.

When you say "the menu can be replaced with NavBar," are you referring to the different options under Drag & Drop( i.e, Nav Classic, NavBar, BrandNav, and Secondary Nav) - or is there another menu option that I'm overlooking?

Yes, he was referring to the different options in Drag & Drop.

[dawsonbarber]

Hi Catrina Is there an easy way to drop the social icons into the footer? Since I believe they're absolutely positioned inside the header/branding area, I don't think CSS would be the way to go to achieve this. One way, I guess, would be to just grab all of the HTML for the icons from the page source and then add them to a section or widget in the footer and maybe change the class name/s for the icons/set to get more control over the styling, but I was wondering if there was a better or preferred way? Cheers

[Rob]

Dawson, Yes, I did mean the sections options available in Dashboard > PageLines > Drag & Drop in the Header area for the choice of NavBar versus Nav Classic. You cannot use CSS or positioning to move the social media icons from the header to the footer. That's impractical and functionally disastrous. To place social icons in your footer area, use a plugin. We have several in the Store or you may find some in

Please Login or Register to see this Hidden Content

The plugins create widgets which in turn may be applied via Dashboard > Appearance > Widgets to sidebars, footer or morefoot. You may also use our shortcodes found here:

Please Login or Register to see this Hidden Content

[dawsonbarber]

Hi Rangelone Rather than using a plugin, I've just grabbed the HTML for the icons, dropped them in the footer, and then removed them from Header/Footer Options in Site Options. The only thing that's missing from my approach, however, is the opacity effect you get when you hover over the icons when they're added through Header/Footer Options. How can I reproduce that? I know that I can just set the hover behaviour to full opacity, but that's not the effect that I want. Is it done through javascript or CSS transition? If so, could you please share the code? Thanks

[Rob]

It's done, I believe, via CSS with two images. One semi-transparent and one opaque. See:

Please Login or Register to see this Hidden Content

[dawsonbarber]

Not sure exactly how it's done on PageLines, but after looking around and playing around for a bit, I found that the following code more or less reproduces the gradual "fade in" effect when you hover over any of the social icons. a.gpluslink, a.youtubelink, a.linkedinlink, a.facebooklink, a.twitterlink, a.rsslink { opacity: 0.5; /* Firefox */ -moz-transition: height 1s ease-out, opacity 1s ease; /* WebKit */ -webkit-transition: height 1s ease-out, opacity 1s ease; /* Opera */ -o-transition: height 1s ease-out, opacity 1s ease; /* Standard */ transition: height 1s ease-out, opacity 1s ease; } a.gpluslink:hover, a.youtubelink:hover, a.linkedinlink:hover, a.facebooklink:hover, a.twitterlink:hover, a.rsslink:hover { opacity: 1; } So if anybody else wants a pretty painless way of dropping social icons into the footer (or pretty much anywhere else for that matter) without using a plugin, all they need to do is view the source code, grab the HTML for the links, then drop them where they want them. And if they want to preserve the opacity transition, then the above CSS will do the trick. Cheers

[Rob]

Thanks for the input!

[dawsonbarber]

No worries, mate. Thanks for your help and thanks for sticking with me through my rather meandering journey. I realize that I started off asking about one thing and I ended up somewhere else. I'll try to stay on-point in the future. Cheers

[Danny]

Is this topic resolved ?