I’m attaching links of where my Navbar is now, and my intended layout in Illustrator. The problem that I am having is the logo to the left of the nav list is pushing the navbar to the right. I wanted someone’s opinion on the best way to approach this layout from a modern responsive point of view. The main image will eventually be an After Effects or Animate movie but I haven’t added any responsive code yet either. Should I put the header section into a 3 column grid container
Or use Flex like Nike
Using text align center on all Li parent elements, and changing the Z-Index of the header elements.
https://azteramaikoa.000webhostapp.com/
https://azteramaikoa.000webhostapp.com/images/amgridb.png
I need the navbar centered until about 768px wide, at which point the website will have to change because of the main image dimensions.
Related
I would like to limit the contents of the main navbar with a container, I saw it done in a video and I also read in a tutorial that can be done, but is it so? In both cases they did not use dropdowns. The content is correctly aligned to the right and left, but with desktop resolutions larger than the container the dropdown that I have all the way to the right, appears aligned to the page, not to the container.
The dropdown uses a class dropdown-menu-right, which setsleft: auto and right: 0, it makes sense that it is aligned to the page, obviously if I remove it it is completely aligned to the left of the page, there is a way with bootstrap classes, without strange hacks, to keep it aligned to the container?
I'm using svelte with sveltestrap, the generated html seems to me like a normal navbar, but I might have missed something, I've been banging my head for a while.
svelte repl
Add class position-relative to container. Menu will align according to container.
<div class="container position-relative"></div>
I'm using bootstrap to create a webpage. The problem is that I have a horizontal navbar a main tag and a footer. When I resize the screen, the navbar main and footer do not align, the navbar is wider than the main content, and the footer is more inside. To partially fix this I modify the style of each element, but when the navbar adjusts itself, it becomes wider than other elements in the HTML. Is there a global way to make everything align?
Its because you didn't include the collapse class of bootstrap which help to resize the navigation bar when screen is resized.Better to use a button which on clicking shows other tags in your navigation bar which is by the way vertical for small screens.
Also please share your code so you can be helped better.
I would like to add two icons to my collapsed bootstrap menu having them equally spaced, including the hamburger menu, and all 3 items centered. As the viewport size changes I want to keep them centered and equally spaced responsively using Bootstraps breakpoints. I have included two examples of what I'm trying to accomplish, I'm just not sure the best way to proceed. I've tried wrapping the logo and icon in the navbar-brand and adjusting it but it did not give me satisfactory results.
I have a Flexbox based nav menu with a logo aligned in the horizontal center of inline links. Every pen or fiddle I tried making of this doesn't replicate what I'm getting for some reason, but you can go to this Flexbox test here which is almost exactly what I'm working from and if you go into an inspector and add an anchor to the main logo image you'll see what I mean.
The way this is set up is the third link has a left margin of auto applied to fill in the extra gap for the logo to fit in. The logo area is separate from the nav menu in the markup but flexbox layout puts them all in line with each other (at lower breakpoints the nav menu moves down).
Now this all works fine and good until you decide to make the logo a clickable link. When you do that, the margin from that third link obscures the hover state of the logo.
Here's a visual example:
So if you tried hovering over the logo where the margin area intersects it, you would not be able to click the logo, nor get a pointer cursor or any hover states (like a background change). Outside of the margin while over the logo, it works fine, but to a user, they're going to think something strange is going on. This happens if the logo is an img (as it is in the original example) or an SVG (as I'm trying to use).
Trying to see if there's a way around this without having to completely nuke my Flexbox layout. My markup is very similar to what is being used in that example. I've tried toying with a higher z-index for the logo compared to the nav, which didn't work. Giving the nav a negative z-index lets you click the logo but then you can't click the nav items.
You can add a relative position to the logo and then play around with the z-index to make the logo the first element.
.logo {
position: relative;
z-index: 1;
}
I've done this a few times on websites, but this is one of the first times I've tried making a website with a width of 100%. I'm really enjoying the way the site looks compared to being in a wrapper with a set width, but now I'm having all kinds of basic layout issues.
I'm trying to make a layout that has a slide show at the top that is 100% width. Within the slideshow I have the website logo and nav bar positioned above the slider. I pulled this off by making the slideshow absolute and the nav bar and logo relative. So far no problem. Now I want to start adding content below the slider. When I try to add the next div which is going to be the <div id="menu">, the div launches to the top of the screen behind the slideshow. I've noticed this has to do with the slideshow being absolute positioned because when I remove it, the <div id="menu"> goes back to the bottom of the screen.
How do I add more content below the slider with a background-image all inside the <div id="menu">?
JS Fiddle
Not really clear what your issue is. Are you asking how to add a background image to the div? Why do you need the slideshow to be absolutely positioned? It is hard to tell how removing the absolute positioning messes things up based on your JS Fiddle.