need help with mobile navigation

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

need help with mobile navigation

Chris Kavinsky
I'm in the process of redesigning a site for a client. I added a side
navigation for the main nav on smaller screens. One problem I'm having is
that on mobile devices, the screen pushed over to the left and leaves space
for the sliding side navigation even though its not engaged. It doesn't do
this on desktop browsers with a small screen. Any ideas on what's causing
this and how to fix it? Thanks.

http://50f.d99.myftpupload.com/
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: need help with mobile navigation

Karl DeSaulniers
Hey Chris,
Just fyi. Got these errors.

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (style-header.css, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (style-footer.css, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (style-content.css, line 0)

Try these. I think this is the desired effect your looking for.

ul.nav-menu ul a, .nav-menu ul ul a (has hardcoded width of 200px... remove)

#site-navigation (needs overflow:hidden;)

#site-navigation ul {
        list-style: none;
        margin: 0 8px 0 0;
        padding: 0;
        display: block;
        transition: 0.3s;
        position: relative;
        overflow: hidden;
}

#site-navigation li {
        margin: 0;
        padding: 8px;
        display: block;
}

#site-navigation a {
        padding: 8px;
        text-decoration: none;
        color: #fff;
        display: block;
        border-bottom: 1px solid #fff;
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        font-size: .9em;
}

HTH,

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Apr 3, 2017, at 4:17 PM, Chris Kavinsky <[hidden email]> wrote:
>
> I'm in the process of redesigning a site for a client. I added a side
> navigation for the main nav on smaller screens. One problem I'm having is
> that on mobile devices, the screen pushed over to the left and leaves space
> for the sliding side navigation even though its not engaged. It doesn't do
> this on desktop browsers with a small screen. Any ideas on what's causing
> this and how to fix it? Thanks.
>
> http://50f.d99.myftpupload.com/
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: need help with mobile navigation

Karl DeSaulniers
Oh and I also forgot.

#site-navigation needs height:auto;

HTH,

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Apr 3, 2017, at 5:56 PM, Karl DeSaulniers <[hidden email]> wrote:
>
> Hey Chris,
> Just fyi. Got these errors.
>
> [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (style-header.css, line 0)
> [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (style-footer.css, line 0)
> [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (style-content.css, line 0)
>
> Try these. I think this is the desired effect your looking for.
>
> ul.nav-menu ul a, .nav-menu ul ul a (has hardcoded width of 200px... remove)
>
> #site-navigation (needs overflow:hidden;)
>
> #site-navigation ul {
> list-style: none;
> margin: 0 8px 0 0;
> padding: 0;
> display: block;
> transition: 0.3s;
> position: relative;
> overflow: hidden;
> }
>
> #site-navigation li {
> margin: 0;
> padding: 8px;
> display: block;
> }
>
> #site-navigation a {
> padding: 8px;
> text-decoration: none;
> color: #fff;
> display: block;
> border-bottom: 1px solid #fff;
> font-family: 'Roboto', sans-serif;
> font-weight: 400;
> font-size: .9em;
> }
>
> HTH,
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
>> On Apr 3, 2017, at 4:17 PM, Chris Kavinsky <[hidden email]> wrote:
>>
>> I'm in the process of redesigning a site for a client. I added a side
>> navigation for the main nav on smaller screens. One problem I'm having is
>> that on mobile devices, the screen pushed over to the left and leaves space
>> for the sliding side navigation even though its not engaged. It doesn't do
>> this on desktop browsers with a small screen. Any ideas on what's causing
>> this and how to fix it? Thanks.
>>
>> http://50f.d99.myftpupload.com/
>> ______________________________________________________________________
>> css-discuss [[hidden email]]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: need help with mobile navigation

Karl DeSaulniers
Alternatively, if you want the menu to scroll and not the whole window,
you can set height:100% and overflow-y:auto on #site-navigation.

Sorry for multiple emails. Last minute thoughts as I leave out the door.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Apr 3, 2017, at 6:02 PM, Karl DeSaulniers <[hidden email]> wrote:
>
> Oh and I also forgot.
>
> #site-navigation needs height:auto;
>
> HTH,
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
>> On Apr 3, 2017, at 5:56 PM, Karl DeSaulniers <[hidden email]> wrote:
>>
>> Hey Chris,
>> Just fyi. Got these errors.
>>
>> [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (style-header.css, line 0)
>> [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (style-footer.css, line 0)
>> [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (style-content.css, line 0)
>>
>> Try these. I think this is the desired effect your looking for.
>>
>> ul.nav-menu ul a, .nav-menu ul ul a (has hardcoded width of 200px... remove)
>>
>> #site-navigation (needs overflow:hidden;)
>>
>> #site-navigation ul {
>> list-style: none;
>> margin: 0 8px 0 0;
>> padding: 0;
>> display: block;
>> transition: 0.3s;
>> position: relative;
>> overflow: hidden;
>> }
>>
>> #site-navigation li {
>> margin: 0;
>> padding: 8px;
>> display: block;
>> }
>>
>> #site-navigation a {
>> padding: 8px;
>> text-decoration: none;
>> color: #fff;
>> display: block;
>> border-bottom: 1px solid #fff;
>> font-family: 'Roboto', sans-serif;
>> font-weight: 400;
>> font-size: .9em;
>> }
>>
>> HTH,
>>
>> Best,
>>
>> Karl DeSaulniers
>> Design Drumm
>> http://designdrumm.com
>>
>>
>>
>>
>>> On Apr 3, 2017, at 4:17 PM, Chris Kavinsky <[hidden email]> wrote:
>>>
>>> I'm in the process of redesigning a site for a client. I added a side
>>> navigation for the main nav on smaller screens. One problem I'm having is
>>> that on mobile devices, the screen pushed over to the left and leaves space
>>> for the sliding side navigation even though its not engaged. It doesn't do
>>> this on desktop browsers with a small screen. Any ideas on what's causing
>>> this and how to fix it? Thanks.
>>>
>>> http://50f.d99.myftpupload.com/
>>> ______________________________________________________________________
>>> css-discuss [[hidden email]]
>>> http://www.css-discuss.org/mailman/listinfo/css-d
>>> List wiki/FAQ -- http://css-discuss.incutio.com/
>>> List policies -- http://css-discuss.org/policies.html
>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>> ______________________________________________________________________
>> css-discuss [[hidden email]]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/