Hi, when I increase my web page to a larger view-port size, my “Portfolio” button switches place from the center to the right, but when I decrease the view-port to a smaller size, the buttons, “About”, “Portfolio”, and “Connect” all return to the their regular order, of first, middle, and end. I don’t know why this is! Also, when the view-port is of a larger size the drop-down menu box for the “Portfolio” appears below the “Portfolio” button as it should, however, when the view-port is decreased, the drop-down menu box begins on top of the “Portfolio” button, obscuring it. Why is this?! See pictures below for better description:
Buttons Switching Places in Wide View But Returns To Normal Order in Narrower/Mobile View
You have a structure like
.row .col-sm-4 "About" .row "Portfolio" .col-sm-4 "Connect"
And that will do wierd things because there are now conflicting CSS rules.
cols go in in
rows, so like
.row .col-sm-4 "About" .col-sm-4 "Portfolio" .col-sm-4 "Connect"