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.
Related
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/
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 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).
Here is my site: http://solarsource.net/new/
Hover over the main nav to see the menu in question.
The About Us menu is almost perfect. The only thing I need to fix on this one is to extend the vertical lines all the way to the top and bottom.
On the News menu, we need to extend the vertical lines all the way to the top and bottom. In addition, the blue highlighting needs to extend the entire height/width of the box.
On the Products/Services menu, again the vertical line needs to be the entire height of the menu. Also, the blue hover background needs to extend the full width inside and the "headers" need to be bold (For Home, Business & Government, Education).
This is wordpress so I can add a special class to the menus if needed but the fixes need to be generic enough so we can add new items without causing something to break.
Any help would be greatly appreciated.
Use negative margins, and then increase the padding to compensate on the li class with the dotted line borders.
padding: 10px 8px;
margin: -10px 0px -10px 0px!important;
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;
}