I cannot seem to figure out how to get my website to look like my homework version. Can anyone help?
Homework version:
My version:
css:
html:
You need to add a padding around the container that has the logo and menu. You should also try display: inline-block so that they go on the same line. At the min, the logo takes up all the width, followed by the menu.
A good start would be to add padding to 'logo' and get rid of that border on your unordered lists.
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;
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/
I have a horizontal navigation menu that breaks upon browser window resize as illustrated here:
https://jsfiddle.net/7oLjwh90/2/
Now the culprit here is:
#adminNav ul li { float: left;
But as soon as i remove float and do display: inline-block for example the dropdown stop working. It becomes a pure mess.
Tried setting display to inline-block and also recreated a new simple horizontal menu and that behaves as expected but cant get this dropdown to work without float.
https://jsfiddle.net/7oLjwh90/2/
Same menu as on https://jsfiddle.net/7oLjwh90/2/ but it doesnt break upon browser window resize. The list items should not stack on top of each other.
Not sure what exactly you wish to achieve. If removing the float property is your problem, you can try using flexbox(here is some good information on the matter -https://www.w3schools.com/css/css3_flexbox.asp). If this doesn't work for you, specify your question further. Hope this is useful.
I am using layers framework for my wordpress based website. Checkout here medshopi.I have used left logo style for the menubar. In the menubar the logo and the menu items are overlapping. Same is the case with responsive layout. I dont understand which part of css is overlapping the logo and menu items.Your help is extremely appreciated and thanks in advance.
Remove
position: absolute;
from line number 157 on style.css
Since your .logo div is an absolutely positioned element, the sibling .nav becomes blind to it.
You have to give the nav enough space, via padding or margin to get around the issue. This assumes that you want the menu to start right after the menu. Example
.header-site nav {
margin-left: 200px;
}
Output 1
You could also remove the position absolute and accompanying style applied on your logo which seems to be the right thing to do.
Output 2:
So I'm playing around with the tutorial from CSS Mastery book so that I can practice and hone my CSS skills and one of the examples is a site called Climb the Mountains
Here is my version: http://shaan.debug.io/test/csstest
So I noticed the ul id="navigation_pri" (begins with the Home link which has a grey background) was not aligning properly based on following the code from the Climb the Mountains example.
It should be positioned in reference to the closest positioned parent, which is div id="branding". So I ran a test to check this and set left:0 to see if it aligns left with that div. But it does not. There appears to be around 50px to the left of space still. I went through my code and can't seem to figure out why this is happening. Can someone enlighten me as to why its not being properly positioned relative to the div id="branding"?
Since you are using a ul tag for your navigation it is automatically indenting and therefore creating that extra space. If you want to remove that space you can add the following css properties to that particular ul:
list-style-type: none;
padding-left: 0;
That will remove the extra spacing and keep it aligned.