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;
Related
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 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.
I'm always stuck when it comes to float. In my grid project, I want to have my buttons in the left and my table in the middle, like in the shown example. And my footer should be bottom but i don't know for what reason is not https://codepen.io/coderBoyNaN/pen/wprOMX. Can anyone help? Exemple of how it should look like, i wanna make it more responsive: https://codepen.io/Soheevich/pen/VybrOo.
Just erase float: left from div#menu
https://codepen.io/anon/pen/zpEXdP
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:
I'm trying to do jquery pagination, however I'm having a problem keeping the navigator on the bottom, even with clear: both.
The problem is that the navigation div <div class="alt_page_navigation"></div> needs to be right where </ul> ends and cannot be in another div, or else the pagination get's broken.
Another problem is that because the page is dynamic, I don't know the width of the alt_page_navigation beforehand.
Here's a live page example, I've tried everything google spit up, to no avail.
If anyone knows of a simple solution, please let me know :)
Thank you :))
Clear won't work with your inline-block display, but you need that for centering.
Try this solution for creating a clearing div, then put
<div class="clearfix"></div>
between your products and your pager.
Put padding at the bottom equal to the height of your nav, and position like so:
.wrapper { position:relative; padding-bottom:1.5em }
.nav { height:1.5em; position:absolute; bottom:0 }
For example: http://jsfiddle.net/CwrMq/
But there's no reason to use absolute positioning, either; just make it a proper display:block item. For example: http://jsfiddle.net/CwrMq/1/
Your .alt_page_navigation div has display: inline-block set on it. If you delete this line in css - your div will clear the floats. If you want its content to be in the center of the page simply add text-align: center to it and make sure that its content is inline-block (now your a are block-level). You can see the working example here: http://jsfiddle.net/6FNH6/
Here is a solution i tend to use in situations like this.
Your paginator needs to go inside a container that positions it horizontally
See this fiddle - http://jsfiddle.net/94MwF/1/
Basically you are using text-align to horizontally center it, and position absolute to put it at the bottom.