Streaming live at 10am (PST)

Need help designing my navigation on mobile devices


#1

I seem to be having a silly moment, I cant figure out how to move my nav links to the left of the nav bar rather then to the right.

Here is my link;

https://preview.webflow.com/preview/millrick?preview=1d41642307aebf50e588501846a57248

Cheers
Matt


#2

Select your "navlink container" element and apply a float:left and then adjust your left margin as needed.

Good luck!
Cheryl


#3

@ctotty

Thanks Cheryl, I did that however the view in my webflow looks different to my published website.

This is how it looks on webflow.

Matt


#4

Pull your entire navigation bar into your "topheader container" and change your "navlink container" to 0 on the left margin. This will keep your navigation left under your logo throughout.

However, this causes you to lose your orange bar which spans the width of the browser. I can think of two options to fix that...
One is to create an orange block to repeat on the x-axis across the bottom of your "topheader container."
The other to is place a div directly below your "topheader container" and fill it with the same orange color, and then decrease the top margin until it sets up under the nav bar.

Hope this helps!
Cheryl


#5


I've made the div I was talking about yellow to show you how it will fit under the nav bar.


#6

@ctotty

Thanks! However do you have a solution to resolve the issue when I add a bottom border to my links it nudges up when you hover up.over the links.

Thanks for your help!

Matt


#7

@Matty

Try adding a transparent colored border on your normal state of your links. :smile:


#8

Hey I'm not quite sure what you mean? Also support staff told me to add my other issues I'm facing here. Hopefully I can get these resolved everything just seems not to work today.

1) On my web site on top right I have a list of key information which displays fine on desktop view, however when I view them on other divices e.g mobile, tablet, the view just gets messed up. I put them in columns thinking that would help but it doesn't.

2)I would like a box of text added to me sliders, I did this by making the position relative as I want it on the bottom, however again when I go through the different devices everything just disappears


#9

I presume you were talking to PixelGeek when you said you weren't sure what was meant...
Select your nav link while in it's normal state (not hover) and add a bottom border of 5px and make the color transparent. That will give your nav link the same borders no matter which state, so there will be no "jumping." However, you'll need to adjust your background orange div by 5px as well so it will line up.

As to your key information on the top right, I'm not seeing anything.

For the text box in the sliders. It's being kind of wonky for me too. You could try changing your slider div from block to inline block and adjust your positioning accordingly, depending on the device view.

Hope this helps.


#10

@ctotty @PixelGeek @cyberdave
Thanks for your help, I did what you mentioned but while doing so this leaves a white gap between my nav and my slider?

What I mean about the key information is the following;

I cant seem to be able to centre it for mobile portrait and mobile only, and when I view it on mobile the text doesn't seem to fit? and goes on a new line with leaving part of the image behind.

Cheers


#11

I resolved the issue about the gap under the green bar, what I did was created an image 1x5 with green background then simply added it to the hover style which fixed that.

But still stuck on the key information going weird on different devices, as well as the slider. I thought it was suppose to be responsive and work across them.

Matt


#12

I don't have much time today to look into this in depth, but here's one way to center it on mobile landscape and portrait.

Landscape:
Select the "top header col 2 div 1" (not the element you see in the graphic) and take off the float. Give it a width percentage of about 65% and then center the element.

Select your other div containing your second line of info, and do the same, except give it a percentage around 80%.

Of course, you'll have to adjust these percentages for the portrait view, but you get the picture.

You may have to adjust other margins and/or paddings as well.

A word of advice: You'll want to avoid naming elements such specific names as possible. For example, since you've named your first line of information "Top Header Col 2 Div 1" you've drilled it down to a very specific application of CSS. Since you want the second line of info to have the same behaviors as the first, you could apply one class called "info" or something like that, and just applied your selectors once instead of twice. It doesn't seem like much for just two, but when you start to have to keep up with a lot of specifics, it can get unwieldy quickly.

Hope this helps!! Your site is starting to really come together! Good job!
(Edited to add additional graphic.)


#13

Thanks I shall give it ago tonight, it seems there's quite a lot of work to do converting the desktop to other devices. I thought it would simply adapt.

Appreciate the feedback, will get there soon!


#14

If you want the behavior to remain the same throughout the devices, it usually does adapt automatically. However, you want the info floated left on some views and centered on others, and you want the columns side by side on some and stacked on others... that's the kind of stuff you'll have to designate for the different views.

You'll get there. :smile:


#15

Thanks @ctotty I finally got round to playing with this today, landscape works fine but portrait view doesn't seem to want to fit as seems to much text to go on 1 line. Is there a way to style them on different lines without changing the site structure?


#16

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.