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>
Related
I am learning some React from a course Maximilian Schwarzmuller created. It seems like some of the styles are not working. Tried to figure out why but I still don't have an idea.
Here is the code https://codesandbox.io/s/elastic-montalcini-3urgmm
Basically Max uses position fixed to stick the header to the top of the website, then he uses flexbox to align items and justify content - space-between to have the button on the right side of the site. He also sets up a padding to move button and h1 header closer to the centre.
If I remove padding it looks ok but then I need to find a way to make those items closer to centre. This becomes an issue.
I know that I can use some workaround but I would like to make it work as Max did. (Maybe he cheated :D )
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.
Sorry if this has been asked before. I'm very inexperienced with CSS. I tried looking through previous threads to see if I could solve this problem myself, but I've had no luck so far.
The website is http://greenemusiceducation.com/
The container right underneath the site's header is forcing all content (in this case a slider) to align to the right. In the 'site-inner' and 'wrap' classes (the classes that are listed right underneath the header in the sites source-code), I've tried editing the parameters but the changes don't seem to have any effect whatsoever. This container alignment issue is consistent across different pages for the site.
On mobile devices, the site loads fine and operates as expected. On Chrome, everything is right-aligned. On IE 11, the slider doesn't show up at all.
I would be grateful for any help!
.content has float: right;. If you want to center it, remove the float, and use margin-left: auto; margin-right: auto; to center it horizontally. Since the element has a defined width, that will center it horizontally. Here's a good resource on how to center things - https://www.w3.org/Style/Examples/007/center.en.html
You can nest the style that is sliding to the right within a paragraph html heading with an inline style that sets the text for that to center. Even though there are other things beside text, it will still center the content of the container nested within it.
<p style="text-align:center;"><div="container></div></p>
I've be trying to put together a website with the top of the page containing a navbar, image slider and testimonial quote (with the whole section taking up 100% of screen height. Then when the user scrolls down, the contact details are below.
I've split the container div (which is set to height: 100vh, width: 100vw;) into individual divs for each section (navbar, slider, testimonial) but the slider will not stay in its div. I want to make sure the slider is always fully visible with the testimonial below. For some reason the slider always hangs outside of the div (highlighted in red in my JSFiddle), and doesn't seem smoothly responsive (i.e. it pushes the text around). I'd really appreciate it if someone could point out where I'm going wrong:
https://jsfiddle.net/uy86dxd9/
Attempted solutions:
I've tried setting img { height:50vh; width: auto; } in the hope that that would remain the same size as its div, but that didn't work.
I've also tried clearing the float as I thought that might've collapsed, but no luck there.
Any questions, please ask :) Thanks in advance.
#Roope is correct. The red shape you had was outside because of the padding, but the problem was the nested container.
https://jsfiddle.net/uy86dxd9/2/
Just remove your sub-containers and just use rows and it goes away. There is still padding but Bootstrap removes this by using negative marings on the rows.
<div class="row">
<div class="col-lg-offset-2 col-lg-8">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
From the bootstrap docs (http://getbootstrap.com/css/):
Bootstrap requires a containing element to wrap site contents and
house our grid system. You may choose one of two containers to use in
your projects. Note that, due to padding and more, neither container
is nestable.
Basically, you don't need a .container[-fluid] around each row. The main container is enough. After that just use rows.
On my wordpress built site, with a Responsive theme child theme, there is a div which contains widgets.
The widgets and their content are showing fine, but the "wrapping" div is not showing what I have styled via css. If I use firebug, I can see that the div is appearing up at the same spot as another div "featured", but is obviously behind it. Well, I need it to be below.
The site is http://thelawcompany.com.au.
The problem div is <div id="widgets" class="home-widgets">. I want the background and top-border that I have declared in CSS to appear behind the widgets. Also, there is a massive gap below the widgets that I can't seem to get rid of.
It because the #featured element is floated.
A solution is to float the widgets also by adding the class grid
Demo: Problem, Solution
<div id="widgets" class="home-widgets grid">