Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
Like Tree1Likes
  • 1 Post By TheGAME1264

Thread: Looking For Help With A Fixed Navigation Bar

  1. #1
    Junior Member
    Join Date
    Mar 2015
    Posts
    2
    Member #
    47523

    Looking For Help With A Fixed Navigation Bar

    Hi All! I'm stuck on an issue with a Joomla site I'm working on. I need to get a header bar to be a fixed item so it remains viewable as you scroll down the page.
    It's located here: School & Academics
    The blue header bar at the top needs to be a fixed item. I have no idea how to achieve this.

    I used to code a lot, but I discovered Joomla and really liked it. I get these themes from Yootheme and their tech support is non-existent. I've posted this question in their forums and haven't heard a thing for 2 weeks. I'm stuck and really want to move on with this site.

    NqOchiw.jpg

    Can anyone help or steer me in the right direction please?
    Thank you!!!

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    The domain name for a school site is boxofvomit.com? That is OUTSTANDING! I love that!

    Now, the reason you're not getting a lot of support from forums is because...well, most people don't know very much. They want answers but give none of their own. I do have a partial answer that will get you started, but you'll have to take it and run with it on your own since I can't edit the them directly.

    The very first div after your body tag is what you'll want to edit. I added this quickly in the Chrome DOM inspector and it fixed the blue bar, but it also fixed the white bar and the logo. I'm not sure if that would be acceptable, but I figured I'd post my answer and give you the general idea and you could play with it.
    Code:
    style="position: fixed; top: 0; left: 0; right: 0; z-index: 99999; height: 36px;"
    The z-index is necessary or it will disappear. The height is as well, although I may not have the right height in there. I just did it quickly.

    The BEST way to solve this is to assign an ID to that particular div and apply the styles to it. For some reason. WP themes excessively use classes and minimally use IDs. I have no idea why that is.
    Hayden123 likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member
    Join Date
    Mar 2015
    Posts
    2
    Member #
    47523
    boxofvomit.com is just my test domain.
    Thank you so much for the head start! You line of CSS did the trick! I'm so close to having this navigation done. Now I just need to get my "cougar" logo to show up on top of the blue header bar. Do you know of any way of doing this? I can't thank you enough. I've been stuck on this for awhile now.

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Code:
    position: relative; z-index: anything high enough to get it on top of the blue header bar. 1 may do it, but you may need to use 1002 since the z-index of your bar is 1001.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:35 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com