I'm trying to get this logo image to extend outside of the header so that it dips into the content when you scroll. It's essentially look like the logo is too big for the header and is hanging off the bottom.
Here's the website: http://185.56.86.90/~onetoncr/test3.com/
Here's an example where the logo (green square) extends past the header: http://185.56.86.90/~onetoncr/friedmanpr.com.
They both use Bodega theme in wordpress and the only difference is that the green FMPR is a different menu/header setting which means the header is in a div class called container and container_inner as well as all the other divs in the red One Ton site.
Tried adjusting the height and putting in z-indexes but it seems like it is contained in the header container. Is there a way to extend the logo outside of the header parent.
Add in your css
.header_inner_left{
top: 2em !important;
background: #fff;
}
and remove width:150px !important in .header_inner_left from your custom.css, well its upto you though.
Looks like the line height on your menu items are pushing your header to the full 150px. nav.main_menu > ul > li > a has a line-height: 150px if you change that to 100px and then set your .header_bottom to have a height of 100px you logo will then stick out.
Just some general recommendation. Your markup and selector rules are really heavy.
nav.main_menu > ul > li > a could easily just be .main_menu a which would take your specificity from 5 to 2 making it much easier to override later.
As for that huge line-height, that's gonna make your items clickable above and under in all that white space. That may be what you are going for but just keep in that in mind, you may want to make the hover more obvious just to provide the user with some better feedback that they are over a "button"
You could also reduce a lot of your mark up and styles by using Flexbox to center your menu items and stick them on either end. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
I am trying to;
Make the text for each link in the drop down menu to be one line only, not 1 - 3 lines. I used
.mkdf-drop-down .second .inner>ul,
li.narrow .second .inner ul {
padding-right: 50px !important;
}
to increase the right
padding but the title still stops at the original point. I am new to css and learning as I go so I am wondering if the css is wrong
I would also like to remove the underline on the text
I've been researching this for a couple of days now and all I have managed to do is the padding.
Website is http://www.agileseo.com.au/beacon
Padding won't help in your case as it will increase the space around the text, so remove it. You must add more width to the container.
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;
}
I have a problem of vertical alignment of inlined list items in the horizontal navigation menu of a header. I can't use floats because of the rest of the layout.
I was thinking that I could use a larger line-height for the list items, but it doesn't really help that much this time. The list items more or less just sit there, at least when I use the Google Droid font. I also tried vertical-alignment, but nothing.
The basic structure is header -> header-content ->navigation > li > a
All of the list items are set to display:inline.
There's also a list item enclosed h1 element which has an enclosed image: li > h1 >img and a submenu in there: li > ul > >li > a, of which the image complicates things as it has a fixed height of 39px.
The header div sets the height of 4 ems and also a background color. It's within these 4 ems that I need to vertically align the content of my navigation.
I need some ideas how to accomplish this kind of vertical alignment. Suggestions? :-)
You can find a full code example of the problem here: http://pastebin.com/zcLspjJz
I need to support modern browsers and IE7 and upwards. But any ideas are welcome, really.
You can try these methods and if it helps:
Use height and line-height properties and use the same value for both. (E.g. height:20px;line-heigt:20px;)
OR set the display:table-cell; vertical-align:middle;
My page looks like this: http://ink-12.terc.edu/index.cfm
I want to get the picture (kids' drawings) on the left to follow the rest of the centered content, when the window expands:
Per the suggestions I found in other answers, I added an outer div (#maincontent) to hold my two divs that I want to scroll instead of wrap (#tbltframe and #drawings), and some additional coding (overflow:auto; display:inline-block; white-space:nowrap).
Now my page looks like this:
http://ink-12.web5test.terc.edu/index.cfm
So now it doesn't wrap (great!), but it cut off my drop shadow on the right side (you can still see it on the bottom). And I need to get the main content centered again (following the centered header and footer)--similar to the first webpage I listed. After the changes, the main content aligns left. I tried adding margin-right and margin-left:auto, as well as text-align:center, but neither did it. I also added a min-width, which doesn't seem to do it either. I can see the drop shadow again when I change the min-width to something significantly larger (74em), then but I don't know why, because #tbltframe (50em) and #drawings (14em) = 64em total.
Any help would be very much appreciated. Suggestions to move forward with the code on either webpage I listed would be fine. Thank you!
Please try the below css on skeleton.css line 64
#maincontent {
display: inline-block;
overflow: auto;
white-space: nowrap;
width: 1169px;
}
It will increase the width of the main content div so the images will not cut from sides..
Found a solution: http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/
Have to:
Create a min-width or width on the outer div (#maincontent)
Make #maincontent a block element with display:block
Center #maincontent with text-align:center
Make the inside divs (#drawings and #tbltframe)not wrap in #maincontent with white-space:nowrap;
Make the inside divs inline block elements with display:inline-block
Then make the text inside wrap again (if you want) with white-space:normal
On this site:
http://stmc.modulemedia.co.uk/HossIntropia
I have code that's generated by a CMS, I have stripped things back as much as possible, removing the .net code and things generated by the CMS, but still cannot see why the text (that starts Hoss Intropia...) is overlapping.
There are basically two DIVS LeftCol and RightCol, that I have moved from being side-by-side to LeftCol being above RightCol.
This is a project I'm taking over, so I'm limited as to what can be changed.
Thanks for your help!
I think you just need to increase the height of the div inside #LeftCol that is containing stuff.
Try changing the height on .menu to height: 480px. Or perhaps even remove the height.
div.Menu has a height property, and since the content is spilling out beyond that height, it overlaps the div#RightCol content.
if you remove the height from div.Menu, it works
settting the margin of the right cols should solve the problem:
#RightCol {
margin:120px 0 0 0 !important;
}