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 8 of 8
  1. #1
    Junior Member
    Join Date
    Jan 2015
    Posts
    3
    Member #
    41405

    Is there a way to keep a nav together?

    Okay, terrible post title I know lol. But I don't know how to say it in one short line.

    Prayer Pond - "Interactive Prayer Journal" is the current code I have so far so you can take a look at what I'm talking about.

    If you'll look at the main nav buttons at the top, I have them inline to the right of the logo. What I'm wanting is as follows:

    1. The buttons are centered and spread out among the remaining space between the right side of the logo and the edge of the browser window.

    2. As the browser window gets smaller, the buttons get closer together (instead of one of the buttons moving to the next line underneath).

    3. There needs to be a min-width of each button so that instead of the buttons overlapping once the browser gets to a certain width the entire mainnav menu (the 4 buttons) move all together to the next line, preferably centered and preferably spread out along the second line).

    I have not been able to find anyone who knows how to do this. Is this possible?
    Last edited by hoodleehoo; Jan 26th, 2015 at 03:39 PM.

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Put the logo before the nav in your HTML and float it left.

    Then, add this to the bottom of your CSS:

    Code:
    @media (max-width:1200px){
      #logo, #mainnav{
        float:none;
      }
    }
    This is a media query. It will apply different styles based on the width of the viewport. By taking out the float, we're forcing the two items onto their own line.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Jan 2015
    Posts
    3
    Member #
    41405
    Okay, that solves the wrapping issue, but how to I make it so that the buttons get closer together as the screen shrinks? I want them to keep getting closer and closer together until they almost touch. What happens now is that they start getting closer together for a little bit but then quickly jump to the next line. I don't want them jumping to the next line until I say so (with the @media).

  5. #4
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    No you dont want that. This will create issues for mobile users. The nav should be easily worked on all devices and shrinking links will cause major problems for you.


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Vapr_Arts View Post
    No you dont want that. This will create issues for mobile users. The nav should be easily worked on all devices and shrinking links will cause major problems for you.
    The links don't shrink, just the space between them.

    Quote Originally Posted by hoodleehoo View Post
    Okay, that solves the wrapping issue, but how to I make it so that the buttons get closer together as the screen shrinks? I want them to keep getting closer and closer together until they almost touch. What happens now is that they start getting closer together for a little bit but then quickly jump to the next line. I don't want them jumping to the next line until I say so (with the @media).
    Then you need to set both the nav and the logo to display:inline-block; and don't float them. Then it should work. If not, post back and I'll try to hook it up when I have a little more time to mess with it.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Junior Member
    Join Date
    Jan 2015
    Posts
    3
    Member #
    41405
    Thanks for the response. Nothing seemed to work, including using inline-block. So, I just used @media to change the percentage manually to make sure every size looks good.

    The problem is that it isn't working with phones. What I mean is that my smart phone triggers the large version of the site and zooms out. I'm using both the
    Code:
    <meta name="viewport" content="initial-scale=1">
    in the head and
    Code:
    @viewport{
        zoom: 1.0;
        width: extend-to-zoom;
    }
    @-ms-viewport{
        width: extend-to-zoom;
        zoom: 1.0;
    }
    in the css. I'm under the impression that was supposed to fix that. :-/ Any ideas???

    BTW, you can seethe sample site at http://granthoneymoon.com/faith_boosters.html
    Last edited by Ronald Roe; Jan 28th, 2015 at 07:13 PM.

  8. #7
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Quote Originally Posted by Ronald Roe View Post
    The links don't shrink, just the space between them.
    Ahh i see, i misunderstood.


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks
    Last edited by Ronald Roe; Jan 28th, 2015 at 07:12 PM.

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by hoodleehoo View Post
    I'm using both the
    Code:
    <meta name="viewport" content="initial-scale=1">
    in the head
    Have a look here: https://developer.mozilla.org/en-US/...wport_meta_tag
    and
    Code:
    @viewport{
        zoom: 1.0;
        width: extend-to-zoom;
    }
    @-ms-viewport{
        width: extend-to-zoom;
        zoom: 1.0;
    }
    I've never seen @viewport. I did some looking around on it, and as it turns out, support is not very deep. iOS Safari and Firefox flat-out don't support it, and Android/mobile Chrome require vendor prefixes. Read the article above and fix your meta tag.

    Quote Originally Posted by hoodleehoo View Post
    Thanks for the response. Nothing seemed to work, including using inline-block. So, I just used @media to change the percentage manually to make sure every size looks good.
    I changed them both to display:inline-block, removed the floats and put #logo before the nav in the HTML. I then gave #logo a hard px-width (480px), set #mainnav's width to calc(100% - 480px) and changed its min-width to 475px. That worked like a champ. No media queries even necessary.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


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
  •  

Tags for this Thread

All times are GMT -6. The time now is 12:17 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com