Build Your Own Business Website header image

Welcome to our Members Only Forum

You are welcome to view the content on our Forum, just scroll down to view this forum post.
If you like what you find and want to be able to post a question, please check out our subscription options.
Please feel free to search the forum using either the Google Site Search above or the forum search below.

Avatar
Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed sp_TopicIcon
Fixed Header possible?
Avatar
Christine
Member
Members
Forum Posts: 50
Member Since:
October 15, 2012
sp_UserOfflineSmall Offline
1
October 29, 2013 - 6:11 am
sp_Permalink sp_Print sp_EditHistory

Hi Rick,

Thanks, as always, for your wonderful support! 

I've been poking around and I found a CSS Fixed Header workaround (http://lifeinthegrid.com/simpl…..ed-header/) but as I am using your Responsive Header, I thought I'd check with you.

How can I create a fixed header, aka floating nav bar, on my site? I've seen this on a bunch of sites lately. It's very handy not to have to scroll back to the top to get to the navigation. Thoughts?

Also, not sure how to make this concept work across devices? (That may be part 2 of this question…)

Thanks Rick!

 

http://www.ChristineFKelley.com

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
2
October 29, 2013 - 8:44 am
sp_Permalink sp_Print

Christine, giving elements a fixed position can be tricky in a responsive site.  Especially because they tend to change in height from device to device.  If you can make sure the header stays the same height or if you can adjust the height for each condition you might be able to make it work.

For example you might try something like:

#top_menu_area{position:fixed;width:100%;}
#header_area{padding-top:42px;} 
Avatar
Christine
Member
Members
Forum Posts: 50
Member Since:
October 15, 2012
sp_UserOfflineSmall Offline
3
October 29, 2013 - 9:45 am
sp_Permalink sp_Print sp_EditHistory

Thanks Rick! I'll experiment with that. On face value, it looks like it's working… Thanks again!

 

Later... well, mostly working.

On the iPad Portrait, it breaks the Drop Down menu and doesn't "float" on the iPhone, etc...

Looks great on the computer though...

Avatar
Christine
Member
Members
Forum Posts: 50
Member Since:
October 15, 2012
sp_UserOfflineSmall Offline
4
October 29, 2013 - 10:19 am
sp_Permalink sp_Print

OK, so while this is looking very cool, there's an issue the "Life in the Grid" guy talked about that I'm not sure how to fix here.

It's the issue of other fixed assets, in my case the "Orbit Slider" in my feature box on the Front Page. 

As you can see, it now slides in front of the fixed menu and it should flow behind. He gave some code that was to work with YouTube videos, but I can't quite figure out how to do this with the Orbit Slider? The below is the code he used for YouTube, how can I fix for the Orbit Slider?

 

 

//Set Videos below header

$("iframe").each(function(){

    var ifr_source = $(this).attr('src');

    var wmode = "wmode=transparent";

    if(ifr_source.indexOf('?') != -1) {

        var getQString = ifr_source.split('?');

        var oldString = getQString[1];

        var newString = getQString[0];

            $(this).attr('src',newString+'?'+wmode+'&'+oldString);

    }

    else $(this).attr('src',ifr_source+'?'+wmode);

});

 Thanks again!

 

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
5
October 29, 2013 - 11:13 am
sp_Permalink sp_Print

His iframe code is non-sense and not in any way applicable here.  However, you may in fact need to adjust the z-value for the fixed element.  His suggested code set it to 1000.  My guess is that should be good enough.

Before you can adjust it in the media queries you'll need to know exactly what you want it to look like and do in smaller devices.  This is exactly why doing this sort of thing is so difficult in responsive sites.

So once you know exactly how big things are supposed to be in each device, then you can begin writing code for those different screen widths.

Avatar
Christine
Member
Members
Forum Posts: 50
Member Since:
October 15, 2012
sp_UserOfflineSmall Offline
6
November 5, 2013 - 8:33 am
sp_Permalink sp_Print

Thanks, setting the z-index to 1000 worked! Now on to other things... 🙂

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
7
November 6, 2013 - 8:35 am
sp_Permalink sp_Print

Excellent.

Avatar
Christine
Member
Members
Forum Posts: 50
Member Since:
October 15, 2012
sp_UserOfflineSmall Offline
8
November 7, 2013 - 9:20 am
sp_Permalink sp_Print sp_EditHistory

OK, so while the fixed header is working, it looks really dopey on the devices. How can I make it fixed on some devices and not on others?

 

Later Update...

So, I figured out how to change the header area to static in the Custom Media Queries, but now the nav menu appears above the header?

http://ChristineFKelley.com

Thanks!

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
9
November 7, 2013 - 12:51 pm
sp_Permalink sp_Print

You can choose the id of the container where you want the menu to display in mobile devices.  If you don't set an id for its location it automatically goes to body.

Avatar
Christine
Member
Members
Forum Posts: 50
Member Since:
October 15, 2012
sp_UserOfflineSmall Offline
10
November 11, 2013 - 1:04 pm
sp_Permalink sp_Print

Thanks Rick, but I admit to being lost here... Can you give me a bit more guidance on this? What I'd like to see happen is the responsive menu sit to the right of the logo on the same baseline... Possible? Right now it's still above and taking a bunch of space...

Thanks!

http://christinefkelley.com

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
11
November 11, 2013 - 3:45 pm
sp_Permalink sp_Print

Yes - add this "header-right" to the location field in the menu options

Avatar
Christine
Member
Members
Forum Posts: 50
Member Since:
October 15, 2012
sp_UserOfflineSmall Offline
12
November 12, 2013 - 6:14 am
sp_Permalink sp_Print

OK, so while that does move the menu, it seems to disappear altogether? What to do?

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
13
November 12, 2013 - 9:58 am
sp_Permalink sp_Print

I Love IT!  NOW Panic and Freak Out!

try #header-right instead.

Avatar
Christine
Member
Members
Forum Posts: 50
Member Since:
October 15, 2012
sp_UserOfflineSmall Offline
14
November 12, 2013 - 10:04 am
sp_Permalink sp_Print

Right? Love it too... wink

OK, so that did put it on the right rather than above... here's a question that may not be possible... in the event that there is space for the three lines to be on the same baseline as the logo, is it possible to put it there rather than beneath? It just goes so deep when it's like that.

Also, how can I get the world "Menu" in there?

Thanks again Rick!

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
15
November 12, 2013 - 1:53 pm
sp_Permalink sp_Print

It will go at the top of any id you tell it to.  But not at the bottom of it.

Forum Timezone: America/Los_Angeles

Most Users Ever Online: 228

Currently Online:
13 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

Keith W Jones: 1441

Brian Tozer: 1004

Carolin: 984

Heidi Hafner: 509

John Cunningham: 423

Reece Morrel: 353

Newest Members:

soundpilot

digitalaerolus

emma62755

sharonmarks

emma80233

Tijs de Jong

Forum Stats:

Groups: 8

Forums: 46

Topics: 7003

Posts: 34845

 

Member Stats:

Guest Posters: 6

Members: 6763

Moderators: 2

Admins: 2

Administrators: Rick Anderson, Rick Anderson

Moderators: Pierre Cote, Laura Nugent