I'm trying to replicate this header:
https://minelligroup.com/
on this website that is related:
https://blog.minelligroup.com/packaging
But, as you can see, I have some alignment problem with the social sharing buttons.
I can't find what is impeding them to be aligned with the rest of the menu bar.
I suppose it could be a problem of transition but I can't solve it.
Thank you for your help.
You can imagine the nav like so
There are two columns, in the second column are the socials and menu. Each are 100% in width relative to their parent column. Use text-align:right; and display:inline-block; to "float" them right.
Here is a working example: https://jsfiddle.net/5fdpwngy/
Related
I got 2 different menus (left aligned and right aligned) I wanted to center them, the theme support didn't help me. This is my first post, I am sorry if I make any mistakes. As I can imagine a css code should fix it, I tried to add it by myself but the code isn't changing anything.
Thanks for helping!
greetings
Webpage Image
Not sure how you structure the nav area, but you can try these two ways:
Make an upper div include the logo and two nav lists around the logo, and in its CSS, set the width and put margin: auto.
If I get it right, you will have three divs under your nav, one for your logo, and two for the nav lists around the logo. In this scenario, try to put below lines into your nav css:
display:flex;
justify-content:center;
The problem is (which you can see in the pictures below) that the "doner", "Wallet", and "Amount" aren't centered on the page.
I've tried changing the margin and padding and moving divs around and etc, but nothing seems to be working and I don't understand what is wrong or how to fix it. (it is hard to see in the code snippet because it's not full screen so I'm just going to give a link to the HTML here)
The only issue I can find is when I inspect element on google chrome. When I hover my mouse over <div class="container"> (the one underneath div class="learn-more">) It shows that the div container is wider on the right side, but I can't find why!
Thanks for the help! If you need any clarification please ask, I couldn't find anything to fix my problem online so I came here.
Here's a picture of what I mean as well:
The essential problem with your code is the markup. You're using the Bootstrap & putting some div directly inside the container & then another container inside this div. See what I mean:
Here are the first three rules from the 3rd Bootstrap documentation you should follow when building your HTML:
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be
immediate children of rows.
So, my suggestion is to revise your HTML layout and use the Bootstrap as it intended instead of applying some hacks.
Start from rearranging containers in the way that the content would be put inside columns and all of the wrappers would be outside of the containers or inside the columns.
put your content that you want to center in a div like
<div class="box">your content...</div>
in your css file just add this :
.box{
display:inline-block;
position:relative;
left:50%;
transform:translateX(-50%);
}
you can also use a float left for your 3 titles and set the same witdh and height for the three with text-center proprety
Recently I am working on a new website and I am creating it with bootstrap. Here is the bootply link that have my website.
http://www.bootply.com/9pUX4JwEYb
According to that HTML in this Link, I have a trouble that i cant fix yet. When I am scrolling up, the text "Main Bodysssss..." is going over the navigation bar. I have tried to position it but no help. Just tell me how to fix this. Many Thanks.
A higher z-index for .navbar should fix this (working example):
.navbar {
z-index: 10;
}
From the documentation,
When elements overlap, z-order determines which one covers the other.
An element with a larger z-index generally covers an element with a
lower one.
I am putting together a series of boxes with lists in them of variable lengths. The boxes are all the same width, but of varying heights. I would like to have the boxes populate on the top of the screen from left to right across the screen forming columns, with the number of columns dictated by the width of the screen. The problem that I am having is vertical gaps in the columns when the boxes wrap around. Please view the following pages with your browser at 850-1150px wide so that the content appears in 2 columns.
Using float:left I got this result
I found an example of another way to do it using display:inline-block; vertical-align:top; which looks better, but still has some vertical gaps.
The complete css code that I'm currently using on the page is as follows:
div {
display:inline-block;
vertical-align:top;
padding:15px;
border:2px;
border-color:#000;
border-style:solid;
width:400px;
}
with the content being a bunch of <div>CONTENT HERE</div> boxes.
Thank you in advance for any help, it's much appreciated.
Solution using Masonry: Go to the masonry site masonry.desandro.com (listed above by nevermind in the comments), and download the "masonry.pkgd.min.js" production file. In the header of the page where you want the grid to work, reference the masonry file. In the body of the page, create an outer div container using the "Initialize with HTML" code snippet from the above site. Within that block, have div containers of the class "item" (or whatever the itemSelector is set to). Please note that you cannot format (at least that I can tell) the div class="item" so if you want to have a box around your content like I did, you will need a 3rd div within the floating div to perform that formatting.
I have menu that is implemented with html and css.
On mouseover of main menu, I have to show all submenus in one place.
Here is an example click here jsfiddle
For this, the submenus alignement is not proper.
According to the example, Test 5 has to come under Test 2 but, it's showing blank space.
How can I align this properly?
Note:: The Submenu items will be dynamic, they may grow or shrink.
Unfortunately, it is not possible with your current markup: if Test5 had to go below Test2, then how would you automatically tell it not to go below Test1? What should the rule be? There's no obvious answer to your question: if you need elements of different size to layout in a space efficient manner, without too much blank space, etc, you could write some kind of layout manager with jQuery that will structure and re-position your menus according to their content.
The problem is your submenus are floating left and Test 5 is getting hung up on Test 3 because it is longer than Test 4.
You can test this by adding a CSS rule to set the submenus to have the same height.
ul .sub.sub10 ul{
height:180px;
}
Link to updated jFiddle