So I spent a lot of time getting this nave bar to work, but as I’m nearing the end of my website, I’m trying to go back and clean things up in the code, and also make things look nicer on the site. The nav bar is pretty plain and I’d really like to make it look a little nicer. A few specific things I’ve been trying to do but haven’t been able to figure out are how to move the buttons slightly closer together, and I’d also like to put a thin blue border along the bottom of the nav bar. I haven’t been able to figure either of these things out though. Any other suggestions are welcome as well.
If you want the items closer together then in your current format you should reduce the width on the navbar and that will automatically bring them closer together. However your current approach is a little flawed in a number of ways because reducing the width will change the margin-top percentage and the navbar will move upwards (just as it does when you narrow/ the window).
Vertical percentage margins are based on the width of the containing block and are essentially useless for lining things up consistently especially when you have a fixed space to work with. It looks to me as though you should place your logo in the flow and then simply start the navbar under it without the need for any exorbitant margins.
If you want your nav exactly centred then you will need to account for the search bar on the right because at the moment the centering is offset by the width of the search box. Either absolutely place the search box so it doesn’t interrupt the flow of the document and then the nav can be exactly central. You will of course need to ensure that the searchbar then never overlaps the navbar but media queries or padding on the navbar should accommodate that.
You will virtually never need to place elements using vertical margins with percentages. (It’s not useful except in some weird convoluted demos.)
Hope that gives you some ideas.
(If you need more specific help then it would be helpful if you could set up a codepen demo of the header and nav section only so that we can work with the real content and more easily offer code suggestions. Codepen allows you to add boostrap css and js files easily from a quick selection dropmenu.)
Ok, I’m saving all the code I have in a notepad file, and then started from scratch. I’ve got everything put into HTML, now I just need to go through the CSS to fix the layout. One question I have, towards the beginning of the code I have a div with the class navbar-header, then inside that div I have an <a> tag with class navbar-brand, and it has an image of our company logo. When I run the page, the logo is too big, but also the div (which is colored for reference) goes well beyond the edge of the image as well. Do I need to resize the div, the image, or both? And what would be the best way to resize them?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="img_chania.jpg" width="460" height="345">
<p>Resize the browser window to see how the image will scale.</p>
</body>
</html>
This makes me think I should size it in html, and then to make it responsive set the width to 100% and the height to auto. However, I think I’ve been told in the past not to set height and width in html. Advice?
Without a demo its hard to tell what you want but usually to scale an image you would set the image to width:100% and the height to auto. Of course that means the width of the image will be controlled by the parent so you would need to set the parent up correctly otherwise the image will be either full-width or even zero width if the parent is floated.
If this is for a main logo the usually you would set the width of the parent to the initial size you want the image displayed when at full screen width. If you then resize the window smaller and at some point you will need the image to grow smaller you add a media query and change the parent of the image to a percentage width or perhaps a smaller pixel width that fits better. It all depends on the layout and on what happens next.
There are many variations of the above and it all depends on how everything else is laid out. If you can put up a codepen demo you will get answers much quicker as people won’t have to self-build your layouts in order to test and see what you have.
I tried creating a codepen demo but for some reason it didn’t look anything like what I have. I couldn’t seem to get it to match up even remotely close.
Ok so I’ve got my parent sized correctly, and I’m trying to do the media query. I’ve never done that before so I had to look it up, and I though this should work, but it isn’t doing anything. Is there something I’m missing?
@media screen and (max-width:1024px){
#logo.responsive {width: 200px;}
}
@media screen and (min-width:1025px){
#logo.responsive{width: 300px;}
}
#logo.responsive{height: auto;}
Oh I misread you’re earlier post. #logo is the image itself, I changed it now so the parent is the one doing the resizing. Question though, my image doesn’t seem to care about the size of the parent? If I don’t have #logo keeping it at the size I want, it just goes back to the original size, well outside the bounds of the parent.
That’s because you probably already styled it using #logo so that means you have to keep using #logo or change all other instances of the id usage.
It’s pretty easy as you just add the required files from settings (bootstrap3.css and jquery followed by bootstrap3.js).
Here’s an example using the nav code you posted earlier (it took about 2 mins to do this).
You can fork that pen and then add your updated code etc and we can see what you are working with now.
You will have to link to the real images or use placeholder images as I did. It’s important to have the images (or suitable placeholders) in place otherwise we can’t see what its supposed to look like.
This is exactly what it should look like when it’s done. The only thing I did to make it look like this was add an id=logo directly to the image, and then add the height:120px and width: auto to the css. The problem is getting it to resize when it needs to.
I’m not sure you’re using the right code. I completely rebuilt the navbar because the old one was such a mess and had a lot of extra stuff in there that wasn’t necessary. So the code in my codepen is the right code. However, what you have at least shows me what I should be doing and I will try it out and see what I can make of it.
