Mobile site variations for nav bar

  • bradyboyy88

    (@bradyboyy88)


    11 years, 2 months ago

    Hi,
    SO my site is http://www.chesapeaketees.com and I am trying to get it to display the nav bar correctly at different resolutions.

    Firstly , I found a tutorial for creating grid images and it uses this code to change the width of tiles at different resolutions.

    @media only screen and (max-width : 480px) {
    /* Smartphone view: 1 tile */
    .box {
    width: 100%;
    padding-bottom: 100%;
    }
    }
    @media only screen and (max-width : 650px) and (min-width : 481px) {
    /* Tablet view: 2 tiles */
    .box {
    width: 50%;
    padding-bottom: 50%;
    }
    }
    @media only screen and (max-width : 1050px) and (min-width : 651px) {
    /* Small desktop / ipad view: 3 tiles */
    .box {
    width: 33.3%;
    padding-bottom: 33.3%;
    }
    }
    @media only screen and (max-width : 1290px) and (min-width : 1051px) {
    /* Medium desktop: 4 tiles */
    .box {
    width: 25%;
    padding-bottom: 25%;
    }
    }

    So basically I wanted to use this concept for my site such that the lower resolutions display the nav menu to the left and at the higher resolutions center it. Currently I am using this to center it :

    .navbar-nav {
    text-align:center;

    }
    .nav > li, .navbar-nav {
    float: none;
    }
    .nav > li {
    display: inline-block;
    left: 75px;
    }
    .navsearch {
    color: #fff;
    float: right !important;
    border: 0 !important;
    padding: .2%;
    left: -2% !important;

    }

    I tried to change this to left and place inside the lower resolution brackets above but it does not work. What am I missing? PS my theme is arcade basic.

    Thanks

Viewing 15 replies - 1 through 15 (of 18 total)
1 2
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 2 months ago

    Currently I am using this to center it :

    Let’s narrow that down a bit, what specifically are you using to center the nav?

    Thread Starter bradyboyy88

    (@bradyboyy88)

    11 years, 2 months ago

    .navbar-nav {
    text-align:center;

    }
    .nav > li, .navbar-nav {
    float: none;
    }
    .nav > li {
    display: inline-block;
    left: 75px;
    }

    Thread Starter bradyboyy88

    (@bradyboyy88)

    11 years, 2 months ago

    thanks by the way!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 2 months ago

    So have you tried moving that specific CSS to one of the higher resolution queries?

    Thread Starter bradyboyy88

    (@bradyboyy88)

    11 years, 2 months ago

    I used the logic but not sure if the syntax is correct since it did not work.

    @media only screen and (max-width : 480px) {
    /* Smartphone view: 1 tile */
    .navbar-nav {
    text-align:center;

    }
    .nav > li, .navbar-nav {
    float: none;
    }
    .nav > li {
    display: inline-block;
    left: 75px;
    }
    }
    @media only screen and (max-width : 650px) and (min-width : 481px) {
    /* Tablet view: 2 tiles */
    .navbar-nav {
    text-align:center;

    }
    .nav > li, .navbar-nav {
    float: none;
    }
    .nav > li {
    display: inline-block;
    left: 75px;
    }
    }
    @media only screen and (max-width : 1050px) and (min-width : 651px) {
    /* Small desktop / ipad view: 3 tiles */
    .navbar-nav {
    text-align:left;

    }
    .nav > li, .navbar-nav {
    float: none;
    }
    .nav > li {
    display: inline-block;
    left: 0px;
    }
    }
    @media only screen and (max-width : 1290px) and (min-width : 1051px) {
    /* Medium desktop: 4 tiles */
    .navbar-nav {
    text-align:left;

    }
    .nav > li, .navbar-nav {
    float: none;
    }
    .nav > li {
    display: inline-block;
    left: 0px;
    }
    }

    Thread Starter bradyboyy88

    (@bradyboyy88)

    11 years, 2 months ago

    sorry I tried the opposite where the text align was center for the higher resolutions and left for the lower. Just typed it wrong above.

    Thread Starter bradyboyy88

    (@bradyboyy88)

    11 years, 2 months ago

    I got it to work by using only

    @media (min-width: 768px)

    Thanks for your help!

    Thread Starter bradyboyy88

    (@bradyboyy88)

    11 years, 2 months ago

    There is one glitch I notice tho. If I am on the desktop and were to make the resolution smaller. Then click the drop down navbar icon to see that navbars but then go fullscreen or drag and make window higher resolution, the search bar shows up on the second line of the navbar. It is not until I refresh that it goes back to the normal spot on the same line as the other menu items. Its kind of strange.

    I am new to web development if you couldnt tell haha.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 2 months ago

    I think this issue is related to having your form inside a list item.

    Thread Starter bradyboyy88

    (@bradyboyy88)

    11 years, 2 months ago

    Does that mean it cant be fixed when kept this way?

    Thread Starter bradyboyy88

    (@bradyboyy88)

    11 years, 2 months ago

    I have had so much trouble with my header and nav bar at low resolutions its insane. I already made a post about this but also my header image on my woocommerce pages(products, carts, checkout) seems to shift to the left at lower resolution.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 2 months ago

    You can resolve this by not having your search form in a list item, but is it worth it? You may not be targeting real users with this fix, but developers who are messing about with their browser window switching from mobile to desktop?

    Thread Starter bradyboyy88

    (@bradyboyy88)

    11 years, 2 months ago

    Your right. I just need to let some things go haha. Last thing I have to fix is that header image shifting for woocommerce pages at low resolutions and then my site is perfect in my eyes!! Any suggestions on that?

    Thanks a lot for the advice.
    Shaun

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 2 months ago

    Could you link a woocommerce page for clarity?

    Thread Starter bradyboyy88

    (@bradyboyy88)

    11 years, 2 months ago

    Yea np.

    http://www.chesapeaketees.com/cart/

    and

    http://www.chesapeaketees.com/product/short-sleeve-performance-tee-2/

    are two examples. If you drag the width of the browser close to pixel width similar to a phone size you will see the header just shift to the left leaving a giant white gap on the right. Its super noticable on any phone I have checked it one if they are hold phone up in regular position. But any page that does not have woocommerce works fine. TO be super particular. I create a new page and it sizes perfectly. I added the cart shortcode and it displays cart and works great. BUT right when I got into woocommerce settings and go to checkout pages settings and set that page as the actual cart page then the header begins to shift. I did everything

    http://docs.woothemes.com/document/third-party-custom-theme-compatibility/

    said to make my theme woocommerce compatible so not sure whats going on.

Viewing 15 replies - 1 through 15 (of 18 total)
1 2

The topic ‘Mobile site variations for nav bar’ is closed to new replies.