Hello! I am having a problem with my bootstrap 4 navbar. Basically when its on xsmall/small screen resolution my content is appearing behind the navigation. I feel this is due to me using the fixed-top navigation. Also, my content areas aren’t scaling down below medium resolution and it looks weird. For that I am using responsive design elements like %'s instead of px and using rem’s and em’s. Should/could I use px’s in bootstrap? Will it automatically make it responsive even without the responsive elements?
I also feel that because my navbar link items are so big (180px high x 300px wide as compared to default) it is creating a serious problem with smaller displays. Just having scaling issues in general.
Thanks!
EDIT: I have tried margin-top and my nav links are so big it doesnt help, while pushing my content down too far.
If you are using position:fixed then yes content will be obscured (or overlapped) by the fixed position element and you will need to make sure that you control the content so that it all works together. fixed elements are removed from the flow and don;t care about anything else in the way.
Usually you would add some padding top to the body (in em or rem) so that the content starts below the fixed header.
These days position:sticky is a better option for fixed headers.
If you are using bootstrap correctly then the containers will naturally scale down for screen size. However, any content that you have specifically added will need to be fluid and responsive by design in order to fit in the containers properly. Using bootstrap doesn’t absolve you of the task of learning CSS thoroughly
You may need to add media queries of your own or into the same breakpoints as bootstrap if you have overly large content that needs to be resized. When adding images you should ensure that they are set to a max-width of 100% and height :auto so that they scale smaller as required when required to do so.
Well that’s never going to fly on a small screen is it
You should be re-organising and resizing your nav links as the screens size gets smaller. Either by media queries or some fluid design methods. Its part of a designers job to ensure that content fits all screen sizes so don’t just design for one screen size but create fluid or adaptive components that change with the screen size.
There isn’t a one size fits all solution and the methods used will depend on the task in hand and the content that has been presented. If you had a link to a live site we could help you with some aspects but it seems that you may need to a little more research on your own first to understand the concepts raised
I’m fairly new, but I do understand CSS pretty well, just not totally getting boostrap 4 and it’s responsive elements on smaller screens.
So you are basically saying use responsive elements like ems, rems and percentages rather than px’s? I swear even some official templates use px’s. - Thats what I was wondering. So bootstrap does nothing for scaling if you use pxs?
What would an example media query look like for this? I just want a smaller navigation for small and xsmall screen resolutions. It still did not look right even when I used responsive elements.
It’s hard to give an easy answer but it depends on what you are expecting to happen exactly?
There’s nothing wrong with pixels in the right places but again it depends on what you are trying to scale? Text won’t scale larger or smaller with the viewport width whether you use px em or rem. You can use the ‘vw’ unit but again its not straight forward as generally you want larger readable text on the smaller screens not miniscule text.
If you are talking about containers then you should be using the bootstrap grid components as they are made to scale properly from mobile to large assuming they are implemented correctly. You should not be placing fixed width content inside the bootstrap grid containers
It may be better if you put up a demo of what you have (on codepen or similar) and we can discuss the issues relating to your specific problem rather than me repeating generic answers that don’t really show you the way
Bootstrap is a framework and to get the most out of it you have to work within its constraints and follow the documentation methodically and to the letter
Ok so below is the site I have thus far. My main problem is that on mobile the content is displayed BEHIND the navigation because it’s fixed-top (fixed). Also as it is on desktop (large/xlarge) is how far I want the content down from the menu. I have been working mainly on the navigation thus far so I know I have some issues to work on with the content areas. - I am basically trying to put in content areas in the middle of a page length of (100vh/100vw). I need those content areas to be spaced as close as possible as it is on desktop except on mobile where I want the content to take up most of the screen. - My main problem is the navigation though. I would be open to a smaller mobile menu (like 50 px/link) thats sort of like the default menu with a hamburger menu there. I would be open to not having the menu be fixed-top for mobile as well, but at least for curiosity’s sake I would like to know how to get my content after my current mobile menu.
Sorry for the delay in replying but I am actually away on holiday at the moment.
Please don’t be offended by my comments below as there is no easy way to say these things.
First and foremost if you are going to use a framework like bootstrap then you must adhere strictly to the framework. You have to have to use the correct container, row and col classes otherwise nothing works properly. The container, row and column classes are specifically designed to work together across the whole range of devices and have padding and negative margins that match to create gutters and maintain responsiveness. If you directly change the padding on the items you lose the structure altogether.
If you want to write your own grid code then don’t use bootstrap because it will just hinder you. The things you are trying to lay out should all be inside the bootstrap col classes as shown clearly in the documentation. There is no need to write or change the bootstrap code to lay out fluid columns.
You are making many beginner mistakes (which we all did) as you lack a clear understanding of how CSS works at a fine level. For example you are giving some of your containers a 100vh height which means that should you have more content than fits in the element the content will overflow on top of something else. You rarely ever give a fixed height to content that holds fluid content like text. You also stipulate 100vw width in a nmber of places which is unnecessary and indeed gives you a horizontal scrollbar as vw includes the scrollbar width. You rarely need to give block elements a 100% width.
You misunderstand how percentage padding and margin work. Vertical margins and padding when used in percentage refer to the width of the element. They do not refer to the height of the viewport. Therefor a 9% padding top will vary in height depending on how wide the page is and is rarely what you want to do. You can see that your 'Greetings" text slides under the nav as you resize the width of the page because the 9% gets smaller and smaller. Your nav has been set at a fixed height which means you would need to use a fixed height padding to keep the content clear.
As I said in my previous post you could simplify this if you used position:sticky instead of position:fixed as his would automatically start the content below the sticky header.
As a beginner you will almost never need to use !important as that is the number one mistake beginners make What you need to do is use your web inspector and see how the original rule was applied and then create a rule of the same (or higher) specificity. If you don’t understand specificity then take a couple of days to read up on it and practice as you can’t progress until you understand it.
You also placed your custom css file before the bootstrap files which means your custom css will be overwritten by the bootstrap files even if you had the same specificity. Your custom css files should follow after the bootstrap files and your new rules will over-ride the bootstrap rules as long as the specificity is the same as the original rules but ensuring your new rules are later in the cascade.
These are the building blocks of CSS and you have to get a grasp on them before you can move on to better things
Also you will almost never use inline styling (styles applied via the style attribute in the tag to which they refer) unless it is a special case. Even when practicing keep your css in the css file or at least in the head of the page if in development.
If you use the bootstrap navbar code you will get a navbar that automatically goes to hamburger on smaller screen.
The skill comes in changing that navbar to suit your needs without breaking the function.
Unfortunately I want be able to give code until I return in a week but I would advise you to read through the bootstrap documentation once again and copy and practice with their demo layouts. If you want to write your own code then ditch the framework.
Just start with the navbar and get that working first. If you want fixed positioning (although its a bad idea for links as big as yours as they kill most of the screen space) then research position:sticky (you will need the webkit prefix also).
Sorry if the above is not really much help but hopefully someone else will jump in until I return from holiday when I have more time
I found 10 minutes spare to give you a start on the nav. You can see it here on codepen.
I put all the code in the left pane to make it easier for you to copy (although in codepen you should really use the linked files and other panels etc).
The above is the basic navbar I mentioned with a few styles added trying to match your nav. I made it sticky and left the hamburger function in place for small screens. Most of this comes out of the box on bootstrap so either work with it or roll your own if you are not prepared to learn bootstrap fully yet.
Notice that there are no inline styles and no !importants needed. the above was about 10 minutes work and I haven’t been that careful with it so is ripe for improvement.
Wow! Thank you so much! I have been fiddling with this for a week now and you did it right in 10 minutes!
First thing I noticed, I can’t find where you put in any column/row/grid items. Was it not needed so far? If I have 4 content areas should I put a grid up of 1 column with 4 rows and give the rows the height/width needed for each content area?
And did just putting the content in the container center it automatically? I will continue studying your code until I get how you accomplished this page of the site. I will probably have some questions later.
Thanks for being nice with a noob, enjoy your vacation and thanks again!
The navbar was a bootstrap snippet and more or less works out of the box. I just added a few rules to make the links expand but used some custom flex code to do it although bootstrap probably has some predefined classes to do it also.
I’m not a big bootstrap fan although I know how to use it
If you have a single column then use the col classes as shown in the documentation. You would need a parent row class and for the row class to be nested in a container class.
There would be no need for widths or heights sat all as the width is controlled by the col classes and the height would be controlled by the content it contains.
Look at the bootstrap documentation as they have code snippets to create any number of columns.
If you have custom element that don’t fit nicely with bootstrap then write your own code for that section rather than trying to change the way bootstrap works.
I’m on a mobile at the moment so can’t offer code but if you copy and paste from the bootstrap documentation it will help you to see how things can be aligned
