Results 1 to 6 of 6

Thread: Centering Sticky Menu

  1. #1
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default Centering Sticky Menu

    Hello,
    I'm just now starting out with responsive sites and am using Responsee framework since it seems to not be as bloated as some of the other systems out there.

    Right now, I'm trying to figure out how to center the menu and keep it centered when the sticky menu appears as you scroll down the page: http://dwwebdesigns.com/cisnew/

    I somehow got the sticky menu centered here: http://dwwebdesigns.com/cis/index2.html. However, I'm not sure how I did it. That template include several thousand lines of CSS which seems ridiculous, especially since I don't understand much of it.

    Any help with this would be appreciated.

    Thanks,
    Deborah
    Last edited by dmwhipp; 09-19-2016 at 02:53 AM. Reason: new link
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Not sure how this will work out with everything else, but it centers the menu items. Get rid of float and add display: inline-block to (around line 90 in cisnew/cisstyles.css):

    Code:
    .top-nav li {
      /* float:left; */
      list-style:none outside none;
      cursor:pointer;
      display: inline-block;
    }
    And add text-align: center to (same file, around line 751):

    Code:
    nav.fixed, .fixed nav {
      padding: 1em 0;
      text-align: center;
    }
    Oh, and I think you may also want to add this style to the stylesheet (to keep the current look for the drop downs):

    Code:
    li.submenu li {
        display: list-item;
        text-align: left;
    }
    Last edited by jscheuer1; 09-19-2016 at 03:36 AM. Reason: add a style
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default

    Hi John,
    You've helped me so much over the years so, if you have the time, I would appreciate your advice.

    I am going to go ahead and learn to code responsive sites. I looked around for weeks trying to find the best way to do this and ran into so many different options and opinions.
    It appears that frameworks like Foundation and Bootstrap seem very bloated, though they appear to have pretty good documentation and support.

    I ended up going with Responsee since it appeared pretty lightweight and like something I could learn, but it turns out that some of their templates are using multiple stylesheets and more convulated than I realized. Additionally, there's very little documentation and support for it.

    I'm wondering if maybe I should move to something even simpler like Pure or Skeleton and then learn each element (e.g. sticky menus, slideshows, galleries, portfolios, etc.) to add to it. I don't think it's necessary for me to create my own grid system since so many have been written by people with more knowledge than me, but I've been struggling to determine the right direction to take with this.

    If you happen to have any opinions on the subject, I would definitely value them.
    Thanks,
    Deborah

    * EDITS *
    Actually, after looking again at Skeleton I'm seeing it has a max width of 960 (http://getskeleton.com/), and I definitely would like to create some sites in larger widths such as 1140. And Pure's default menu is vertical (http://purecss.io/) and the majority of my clients want horizontal menus with drop downs. This is so frustrating.... I've been reading up on this for months and trying to find something to work with and learn and I keep running into things like this.
    Last edited by dmwhipp; 09-19-2016 at 03:40 PM.
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You're actually way ahead of me on all that if you can believe it. My main focus is troubleshooting javascript. Along the way I've gained a working knowledge of css that allows me to troubleshoot it as well (usually), but I don't design sites and haven't read up on the things you're mentioning. I would say that the simpler the better. One thing you mentioned was vertical menus versus horizontal ones. Vertical is good because it has a better chance of being accessible to mobile devices. There are menus that change from horizontal to vertical based on screen size using either css media queries or javascript. DD has at least one of these. I was just looking but can't seem to find one right now. As you know, the library here is quite extensive.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Beverley usually has good ideas for design templates and such. She's not always around but does check in from time to time. I'll PM her you're interested and give her a link to this thread.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default

    Hi John,
    I appreciate the assistance. At this point it looks like I still have tons more reading to do, as well as finding some online tutorials. I'm sure I'll be back here for more help.
    Thanks again,
    Deborah
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

Similar Threads

  1. Resolved Sticky Horizontal Menu help
    By mlegg in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 05-19-2016, 04:19 PM
  2. Help on sticky horizontal menu please
    By mwj427 in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 02-26-2016, 04:02 PM
  3. Resolved Sticky Content script and drop down menu
    By taghaboy in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-20-2012, 04:05 AM
  4. Sticky Tooltip script status text not centering (IE9)
    By sonofray in forum Dynamic Drive scripts help
    Replies: 10
    Last Post: 01-26-2012, 05:21 PM
  5. Sticky Tooltip script - not sticky
    By jscheuer1 in forum Bug reports
    Replies: 0
    Last Post: 11-09-2010, 03:01 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •