I'm new to this forum so hello to all.
I'm working on a WordPress website theme called tesseract. I am new to WordPress so have limited experience working with it.
The problem I'm experience is with the menu at the top of the page. If you visit www.avoinvents.co.uk and take a look you'll see that the categories don't sit on the same line. If I remove one of the categories the page looks much nicer and neater. All categories are necessary so I could not delete any.
Could anyone on here suggest how I make the necessary changes to fix the menu.
Many thanks
Here's the CSS that I changed in my browser to make the menu appear in all one line:
#masthead {
padding-top: 10px;
padding-bottom: 10px;
}
#site-banner-left {
width: 100%;
}
The main problem was that the site-banner-left CSS definition had a width of 60%, causing the text to wrap around its border, so I changed its width to 100% and added the padding to make the navigation area a little bigger. If this messes with other parts of the theme, try making the text size of the site-banner-left definition smaller instead of changing its width. Hope this helps.
You have limited the available width because an ancestor element, #site-banner-left, has a width of 60%. Increase this value or remove this rule to allow the entire menu to fit naturally.
Additionally, since the menu items are inline-block elements, you can force them to be on one line by setting the parent element's white-space to nowrap:
.nav-menu {
white-space: nowrap;
}
Related
This question seems to have been asked a thousand times, and I've read through most of them and still no luck.
Here's the site i'm trying to work on http://exilion.eu
I want the top photo and the menu bar to scale to the browser.
I thought i managed to fix this, but for some weird reason the next element popped up inbetween, as you can see.
I'm styling a wordpress theme so that's why I'm not 100% sure of what I'm doing...
The elements are contained in
' #masthead '
and it has a min-height of 100%.
As does all of its parents.
Thanks for any help!
You could try:
#masthead {
min-height: 100vh;
}
EDIT: I think you may need to remove overflow:hidden from body, html to show the scrollbar.
Hi so I am working on creating a wordpress template from an existing static website.
However I can't seem to get the CSS for the menu to work correctly.
I need a style that is applied to the menu to be applied to all of the li and not have to code each one individually.
The problem is I want to add a background-color to each item (making them look like buttons). If you look at the site again, it puts a huge box rather than putting a small background-color to each item. I hope that makes sense.
You can see the site here: http://lawrences.work/
First, remove your width:149px; on #menu-menu.
Second, on #menu-menu li, remove all margins, and try apply this code
# menu-menu li {
background-color: #FFC0CB;
display: inline;
padding: 10px 20px;
}
Alright, so I've checked it out and it appears to be that the div#logo is causing your menu to be vertically stretched.
I'm not entirely sure as to why since I didn't scan all the CSS or couldn't find anything related to it directly.
Either way I do have an explanation for what actually happened anyways.
So this div.menu-menu-container in your HTML is lexically positioned just below the div#logo - if you inspect element on them you should see highlighting overlap when hovering between the two.
An element that is float: left basically has no height. It is sort-of removed from the document flow unless the div below it has clear: both or the parent has overflow: hidden - both which have their own nasty side-effects.
Anyway, this div#logo caused your div.menu-menu-container to stretch vertically because the div#logo was floated and your div.menu-menu-container wasn't causing it to be quirky.
To fix this I added one property to div.menu-menu-container which should not harm your layout in any way except for keeping these floated elements out of your way.
the property clear: both allows you to clear a float so that the document flow after it turns back to normal. This shrunk your menu down to the size it's supposed to be in the position it's supposed to be in.
EDIT (18-11-2015)
I actually had a choice of using clear: both or float: left - both fix the issue since all floated elements do think about each other, just not about the non-floated elements as much.
clear: both however is the nicest solution in this case because it doesn't change the behaviour of that element specifically whereas floating it does.
Also, the snippet you're going to need for your code to work:
.menu-menu-container {
clear: both; // or float: left; for that matter
}
For more reading on MDN / css-tricks
float
clear
css-tricks on float
Hope this helps you understand your issue, if you need more information I'll see it in the comments!
Good luck
I'm using the Twenty Fourteen theme in my WordPress web site. On one of the pages I want to add images on the left side of the content area (menu sidebar is to the left of that) such that the text wraps around the image.
I have added two images (near the third and fourth H4 tags, if you take a look at the page) and both of the images are being forced behind the left sidebar due to the theme's -168px margin-left setting on the image's parent figure element.
On the page, if you use an Element Inspector/FireBug/whatever, you'll see the images nested in figure elements in the code and that it's way off to the left behind the sidebar. In the Rules viewer, it's showing a margin-left: -168px on classes ".full-width .site-content .wp-caption.alignleft"
I added my own class to the images to try to offset the margin by using margin-right: 168px, but it's not having an effect, presumably because the -168 left margin setting is on an element that is a parent of the image.
I don't want to select all figure elements to offset that -168px - I may want that for other figures - I don't know. WP adds an ID to each image, but I don't want to have to select each and every image ID (unless that's the only way), so how do I handle this?
Thanks for anyone's help.
Remove the .alignleft class from the figure's html.
This will remove the margin.
To get the text to flow around the figure you need to give it a property of float: left and add some right and left margin to make it look a bit nicer.
html for the figure (your image) should read:
<figure id="attachment_10" style="width: 88px; float: left; margin: 0 20px 0 10px;" class="wp-caption">
I'd say you should look at styling elements in css stylesheets as opposed to defining your styles in html.
A book for you would be:
HTML & CSS: Design and Build Web Sites
By Jon Duckett
Its what I used when I first started CSS. Its got all you'll most likely need for a while and very beginner friendly...
After some more fiddling around looking at the CSS and trying some settings I realized that I kind of answered my own question. I said that the figure element that the image is in has a setting of margin-left: -186px;. All I had to do was add my own CSS: figure { margin-left: 0px; }. Why I didn't see that sooner, I don't know...
I am currently trying to get my footer menu to center and appear all on one line. Currently, it is on 2 lines for some reason.
The website is: http://museiam.ca/
I am trying to achieve this (image): http://museiam.ca/wp-content/uploads/LookBookPage_1.jpg
The theme I am using allows the option of 3 OR 4 widgets in the footer area. I currently have it set to 3. The menu itself is in one widget including the links Customer Care - Newsletter, where the Follow Us link is in another HTML text widget with all the social icons. I am trying to put everything on one line and centered like in the picture with equal padding.
I have tried to increase the widget of the menu width but to no success. Here is the CSS I tried:
.widget widget_nav_menu .menu-footer-1-container {
width: 800px !important;
}
I am open to any input or solution to achieve my desired look. I appreciate and thank you for all looking.
Look for this .container_12 .grid_4 and change the width to 100%
.container_12 .grid_4 {
width: 100%;
}
Also, you have another widget there which has an empty text post, remove that.
You are using 3 'grid_4' divs to fill 'container_12' parent div. What you need to do (from my perspective) is the following:
Use a single 'grid_12' div to wrap the menu, instead of dividing it into 3 'grid_4'.
Then, give menu UL 'align: center'
For centering li children do 'display: inline-block' on them (I think you already did this one).
I have a problem on my wordpress blog with the way posts are shown on the main page, and I think it's due to the size inside css/html, but I don't manage to find a solution. I'm asking for help.
The blog can be found at the URL: http://pavilionmagazine.org
As you can see on the main page, each post has the same size (due to css .post height: 600px; but when you mouse over they change size). I've managed to make the photo size the same, the excerpt to be the same number of characters, and the .post box is 600px high.
However, when you mouse over the posts they change their size and some of them (2nd, 5th, 8th posts from below) switch position. Why is that happening?
Because of each posts' size the grid has errors in it.
Why can't the posts be aligned, occupy the same size and make part of a nice fluent grid?
Thank you in advance :)
.post:hover needs to have a fixed height. Take a look at the two:
.post:hover {
height: auto;
}
.post {
height: 600px;
}
The auto height of post:hover right now is overriding your fixed height on .post.
As for position, inspect the two and see what else is being overriding by the hover values. Keep hover overrides to a minimum.
It seems that the .post boxes height is set to auto on mouseover.
So you have to edit your style.css file, line 350 and delete the css rule: height:auto;
Also, there are a lot of duplicated css rules on .post:hover. You can delete all and try this:
.post:hover {
background-color: #eaeaea;
}