I am pretty new to this. I have a bootstrap site i am working on. I can figure out how to have a menu bar at the bottom of page that follows the page down using class navbar and fixed-bottom. The issue is it really looks bad on a mobile and I would like a fixed top menu for those. If I change it for mobile it changes for wider screens as well and vice versa. How do i make it behave different to the left of the breakpoint ?

On the top menu of the Site Designer project you will see a tab "Toggle Menu's" open that and choose "Default Mode" This makes the purple breakpoint indicator all active.
With Bootstrap you need start your layout "MOBILE FIRST: so move the pointer all the way past the first default breakpoint indicator to the left of it, perhaps around the 360px mark (average width of mobile devices?")Now you can style the nav bar thing make it stich to the bottom whatever wherever you want., once you are happy with the layout of your page move the indicator up to the right slowly.

If and when the layout breaks STOP THERE. ask yourself a question "IS THERE ANYTHING I CAN DO TO MY LAYOUT TO MAKE IT LOOK GOO AT THIS POINT" IF THE ANSWWER IS YES, then do it, and carry on up as before until it happens again, repeat the process, IF THE ANSWER IS NO then add a new breakpoint and make the changers, until it looks OK, then continue up.

Actually Paul, it's not just the menu that doesn't look great on mobile devices, there are other things going on that will effect your whole website (which also contribute to the nav bar not looking great at mobile devices too. One of them being that 3rd party banner thing, which isn't the slightest bit responsive.

And to be honest you should be using "STICKY" position rather than f
"Fixed"

Some people may say sticky doesn't work on mobiles, but I say it does work on modern mobiles, ans there is also a work around to get "Sticky" to work on older mobile devices too