So, I am using bootstrap for my navbar. Thats all easy and simple and I have that implemented.
Since I have a header on top of my Navbar, I decided to put them both inside the same row div and give each a col-md-12 so they would align. I then did
#media only screen and (max-width: 500px) {
#titleRe {
width: 75%;
}
#navRe {
width: 25%;
padding-top: 1.5rem;
}
}
and it looks like this navbar uncollapsed. As you can imagine, collapsed, it looks amazing and they are side to side, but when uncollapsed I can't view the navbar properly (for the obvious reasons).
My question is: How can I make the Header disappear when I open the navbar, and make the navbar centred?
Thanks
Related
I'm having an issue with my sites mobile navigation bar being scrolled past the view-able area when the browsers navigation bar is showing. I've tried a few things to fix it, however I cannot seem to get it working properly.
Before scroll down:
After scroll down:
Excerpt of my SCSS relating to the nav bar:
nav {
display: flex;
flex-direction: column;
float: left;
background-color: #3a3e4b;
height: 100%;
width: 100px;
position: fixed;
}
// body also switches flex direction to put the nav bar at the bottom.
#media only screen and (max-width: 720px) {
nav {
flex-direction: row;
height: 70px;
width: 100%;
}
}
Full SCSS available here: https://github.com/CorruptComputer/CorruptComputer.GitHub.io/blob/master/assets/css/main.scss
I looked through these but neither of them seemed to help:
Issue when resizing top navigation bar on mobile
How to create a sticky navigation bar that becomes fixed to the top after scrolling
This is an issue related to google chrome, that you will have to find a work around for.
When the chrome mobile top address bar appears, it pushes the page downwards and because of that you get this issue.
By scrolling the page, the top address bar will disappear.
Try this Javascript code, you can use it as a function or just as a single line on top of your Javascript file.
scrollOnLoad();
function scrollOnLoad() {
window.scrollBy(0, 1);
}
Or
window.scrollBy(0, 1);
On our website: https://dev.shiftdivorceguide.com/ everything looks great on desktop.
When I switch to smaller screens like tablets I get a padding to the right of the screen. When I go even smaller (smartphones) I get an even larger padded area to the right of the screen.
I am unsure if the Panic Button bar at the top may be interfering with the code of the page (.panic-button-container). I have already tried altering the CSS in the media queries. To reduce the size of the white area on tablets I changed the code below concerning the logo and navigation widths.
I changed:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 40%;
float: right;
}
}
to:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 80%;
float: right;
}
}
This helped a little with the layout but I still get a white bar on smaller screens. The smart phones are the worst. Any possible solutions would be appreciated.
Stop using floats. Use Flexbox. Too many clearfix divs in the way.
Obviously the footer is extending past the site content body as well as some other elements.
If you really want to narrow it down set this style:
* { outline: 1px solid red }
That way you see what container is over-extending and then set it's width to 100% instead of a fixed width.
EDIT 2:
Using my technique I have narrowed down the problems:
.footer-menu
remove width: 500px;
.lp-section-content row
remove all negative margin
.vc_column-inner vc_custom_1548439628787
remove all padding
I have a section in the header on the right side that scales down fine with the exception of how the right block of images are moving. The images resize just fine, but once I begin to scale down, They push into the logo div and then are placed above it.
How can I position them to place under the logo and line up accordingly while staying in the header and without just turning the display to none when I reach a certain screen size?
Here is a link for the jsbin of those images/badges. The live site is in Wordpress and the code is too much to post. Maybe if you just use Firebug or the dev tools.
This is the live version of the site.
Also as a sidenote: I have the -190px margin enabled on the live site.
Here is a screenshot just for reference:
I managed to fix the issue. I added a separate media query like so:
#media screen and (max-width: 479px) {
.badges-container {
position: relative;
text-align: center;
margin-top: 0px
}
.badges img {
width: 19%;
}
I am using a modified version of the following carousel snippet:
http://bootsnipp.com/snippets/featured/tabbed-slider-carousel
My problem is: When you make the screen smaller, the list elements change from horizontal to vertical. I would like to keep it always horizontal but I cant find the point to jump in to change the code.
It's this part of code that keeps them horizontal:
#media (min-width: 768px)
.nav-justified>li {
display: table-cell;
width: 1%;
}
}
You can apply this without the min-width but keep in mind that the contents should be very narrow to keep it responsive.
I have a logo with a menu next to it:
This is the HTML:
<div id="logomenuwrapper">
<div id="logo"><img src="img/logo_light.jpg"/></div>
<div id="menu">
<ul>
<li>About</li>
<li class="notfirst">Work</li>
<li class="notfirst">Contact</li>
</ul>
</div>
</div>
This is the CSS:
#logomenuwrapper{overflow:hidden;}
#logo
{
padding-right:1.2%;float:left; max-width:100% !important;
max-height:100% !important;
display:block;
}
#menu{float:left;padding-left:1.2%;font-size:0.875em;border-left:1px solid #ea4a4a;}
#menu ul li.notfirst
{
padding-top:0.3225em;
}
I have added some media queries that will make the menu font smaller when screen gets smaller.
At some point, the menu will be smaller than the logo. What should I add to make the logo scale with the menu? I already added:
img {max-width:100%;}
A picture of how it looks like on smaller screen (as you can see the logo is too big):
Try changing your media queries to something like this:
#media screen and (max-width: 800px) {
body {
font-size: 85%;
}
#logo img {
width:84%;
}
}
#media screen and (max-width: 400px) {
body {
font-size: 75%;
}
#logo img {
width: 75%;
}
}
and #logo to something like this:
#logo {
padding-right:12px;
border-right:1px solid #ea4a4a;
float:left;
}
Working Example
Note: Be sure to put #media screen and (max-width: 800px) above
#media screen and (max-width: 400px) as seen above.
See Why do the order of media queries matter in CSS? for more information on placing media queries in order.
It's admittedly not semantic... but have you looked into scalable text - FITTEXTJS
It uses javascript - but it allows the text to scale as well. You already have a solution to the image - But I see the problem lies in the text itself - Using media queries has you define break points, but doesn't make your text as fluid as YOU need it. I'll edit my post with a fiddle as soon as I come back from the gym, just thought I'd post this thinking it MAY be helpful.
You should set the width of the image wrapper (#logo in your case) inside the mediaqueries to get the image scaled. Or set it globally in percents (see jsfiddle link).
Also add max-width: 100%; for all images.
img { max-width: 100%; }
#logo {
width: 14%;
// remove max-width:100. not needed.
...
}
See http://jsfiddle.net/weP7u/ and resize the browser
I think your going about this the wrong way. Why make the text smaller when the screen is smaller? This probably occurs on a mobile device where you need to make sure you have touch targets that are big enough to reliably click your menu. You could keep the text the same size, and add padding/margin to make the touch target better, but that makes this menu even "bigger" next to the logo.
Instead at the smallest size, try stacking the nav underneath the logo and then once that looks lost as the screen gets bigger, bring the menu up to the right of the logo like you currently have. This neatly gets around doing any text or image scaling, while enhancing your design for small devices.
I put together a demo for you. Be sure to view the full preview so you can resize and see the new menu behavior.
You could use any pattern you want at the smallest size, I went with a simple stacked pattern because your menu easily fits in one row. If you had more navigation items in the future, you could do an accordion or even move to an off-canvas approach.
Further reading:
Check out Chris Coyier's post on making designs tablet friendly, some great tips in there.
Also, check out Trent Walton's short post about type and touch.