I am having a issue with the navbar on the child theme using the Mystile theme. When on a mobile phone the nav bar turns into a square box that you click on to acess the navbar, for some reason it appears ontop of the logo, I just can't figure out or get any CSS to make it go to its own line. I am hoping someone can help here.
Website: http://test.cyberglide.co.uk
Install Custom CSS plugin (asking you to install plugin because it overrides all other CSS) and insert this CSS. You can use other methods to override all other conflicting CSS sheets.
Be sure to include media queries for Mobile views.
#media only screen and (max-width:43.75em) {
#header #logo {
float: none;
display: block;
}
#header .nav-toggle {
position: relative !important;
display: inline;
}
}
Related
I want change the main menu of Avada Wordpress Theme in the header to be left-aligned not right,
it is like this:
and I want it to be like this:
How can I do that in the CSS?
Notes:
I did that using the CSS, but the problem that it is not working in all screen sizes when I tested it, I did that with this code:
.fusion-main-menu {
position:static;
text-align:left;
margin-left: 0px;
margin-right: 30%;
margin-top:4px;
}
but it is not made it fixed aligned to the left with the same space in all screen sizes :(
Avada has option of create "Layout Builder".
With this option, you can create global header with avada page editor as per your need. And keep button out side of navigation to maintain left right position.
Using CSS Only :
Use .fusion-main-menu { float: left; padding-left: 50px; } and use JS to get last button to out of nav tag. and apply float:right to that buttton.
jQuery( ".fusion-main-menu li:last-child" ).wrap("<div class='cst_btn'></div>"); jQuery(".cst_btn").insertAfter(".fusion-main-menu"); Make sure you have menu with ".fusion-main-menu" class only once on page else use diff class or ID.
I'm trying to make a single link in a WordPress top navigation menu that has a different background color but running into some issues.
What I have works on most of my pages but others not (as seen below). I assigned a CSS class (.contact-us-menu) to the individual menu item in the menu builder in WordPress, but I can seem to figure out how to get it to work across all the pages.
Wrong. (https://www.csolsinc.com/insights/)
Correct. (https://www.csolsinc.com/insights/webinars/)
This is the custom CSS I added with the "Wordpress Add Custom CSS" plugin.
li.contact-us-menu {
background-color:#f47e00!important;
height:50px!important;
border-radius:50px!important;
padding-right:15px;
color:#ffffff!important;
font-weight:bold!important;
vertical-align:middle;
}
li.contact-us-menu a {
color:#ffffff!important;
}
Any advice?
I looked through both of your site pages to look for the differences and I am seeing this line affecting the 'wrong' links:
#top-menu .menu-item .dropdown-toggle {
position: relative;
top: 11px !important;
For a fix, with your I would either change the top to -1px as in your 'correct'
or try to add:
li.contact-us-menu {
line-height: 50px;
}
to your css.
I created my website using Bootstrap and then converted it to WordPress: My website. I'm not new to Bootstrap, but am new to WordPress.
I'm having a problem that I just can't solve: When I look at the blog page or any of the posts pages in mobile view, there's a huge padding at the top of the post header.
I've tried modifying my CSS file to reduce padding at the top of the heading:
.entry-header {
padding-top: 10px;
}
but it's just not working.
The problem is not with your padding but with your #sidebar div. The sidebars height is causing the mobile issue.
As you are hiding all of the content in your sidebar you might as well hide the whole sidebar on mobile using a media query.
Add this toward the bottom of your css:
#media only screen and (max-width: 767px) {
#sidebar {
display:none;
}
}
I'm trying to add an arrow to the left hand side of my active link in my categories sidebar for my wordpress site I'm building.
I've already put in the css for it to behave the way I'd like it, I've added a small change in colour just so I know it's working well.
I've attempted to add a background image with a small .png file and tried various CSS styling to get it how I want it but I've had no luck even showing the image.
I'm open to using the character such as "➤" or the like if I cannot use a background image, maybe I might be missing something.
http://94.23.211.70/~cewp/product-category/cushions/
The above my my URL that will go directly to the page you're wanting to see along with a link already highlighted on the sidebar.
Here is the css that is making this active:
.product-categories .current-cat a {
color: #000033;
background-image: url("images/ICONNAMEHERE.png");
}
Hopefully this is enough information to provide, anymore then just ask me.
Regards
You can achieve this by css and font awesome. First add font awesome to your project. You can also use unicode charecters instead.
.widget_product_categories li { margin-left: 2.5em; }
.widget_product_categories li:before {
display: block;
float: left;
margin-left: -2.5em;
font-family: 'fontawesome';
font-size: 14px;
content: "\f054";
}
if not interested in adding font awesome content:url("images/ICONNAMEHERE.png");
I am adjusting a Wordpress site using twenty fourteen theme.
I have removed the left sidebar - i did this by simply commenting out the php code.
Whilst the sidebar div is now removed, when i try to remove the margin-left that moves all the the other content 222px it hides the content.
Here is the website
http://pacificwhiteboards.com.au/product/communicate-corporate-magnetic-whiteboards/
Any ideas ? I am at a bit of a loss.
Thankyou
James.
Look for the .site:before CSS selectors; it's injecting content, and that's what's covering your stuff. When I removed all the '.site:before' rules, it seemed to work fine, though I don't know the theme itself well enough to say that there won't be other tweaks you'll need to make.
Add the custom css to remove the whitespace:
.site:before {
display: none;
}
Then you can center your site content adding:
.full-width .site-content {
margin:0px auto;
}
.full-width .site-content .has-post-thumbnail .entry-header {
margin:0px auto;
}
.singular.full-width .site-content .has-post-thumbnail.hentry {
margin:0px auto;
}
Also, I know you didn't ask about it, but I noticed some whitespace on your fixed header, you can get rid of it with a little more css:
.masthead-fixed .site-header {
max-width: 1000px;
}
Cheers!