I need help with styling navbar menu for mobile devices. Currently I am able to either have all the buttons be on the left, but when i try to put them in the center of the screen they do align but its left-aligned in the center of the page whereas I want it to be center-aligned to the center.this is on the left without any style
when i add this code [div className="flex justify-center items-center"] it becomes like this image.which is like this in the center but still left-aligned text
how can i make it center-aligned text so that it looks a center flow and not so strict.
any help would be appreciated.
To make text center aligned use text-center in your div className. If this doesn't work, do this directly on the text, e.g: h2 className='text-center'.
Related
I made a leftsided navigation bar that works very well, but I still can’t add any icons inside the buttons properly. Here is the code of the navigation bar in CodePen
codepen.io/Eduardo-Trindade/pen/MWXMZvb
I tried adding the icons to the buttons, but it appears at the corner of it, not centered, and I couldn’t center it there.
The main reason behind this is that you are inserting the icons inside the span element. Insert the icons inside the tags and you are good to go.
The element span has the class toolkit making the icons appear at the corner. Try to have the icons, not inside the tooltip (span) class but instead inside the element. Use the flex property to get the image in the centre of the buttons.
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 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.
Please guys help me ... The sidebar will be allways active so i need to center the content on the webpage such as the highlighted text. The problem is that it's centered with width of the whole page counting the sidebar. can i divide the the widths somehow? the sidebar is made in bootstrap it's made with cols so i dont know the exact width.
You can post your code, but the general idea would be for you to place a div next to sidenav (to the right), you can do that by setting the margin-left to the width of the sidenav and center the text in that div
I am having a problem with vertically aligning my text which is shown on top of my image. It works fine for one resolution but as the height of the image changes the text is no longer vertically aligned.
I believe the problem is on this line: <div class="block" style="height:100%;">
If I could change the height variable to the size of the image as it resizes then I think it would work but I am not sure how to do that.
The HTML and CSS code for my problem are on a fiddle.
CODE HERE
Any help would be greatly appreciated, thanks!