I have a strange issue on a website I am trying to customize.
When I activate the Avada theme, the menu items in the navigation disappear, but I can hover over them. Also the social icons in the nav are not visible and no matter what options I select in Theme Options > Menu > Menu Options, they do not apply at all.
What I have tried until now:
Deactivated/Activated all the plugins
Deleted the demo content, reinstalled the theme. Still no result.
I took down the coming soon page. Here's a link to the website http://www.tipografiamarian.ro/ if you'd like to take a look. As you can see. while the page is loading, the navigation is visible for a second or so, then the elements in it disappear...
Has anyone else encountered this issue before?
Please help, thank you! :)
It's showing line-height:83; (instead of 83% or 83px etc) which is causing the issue. If this is from an external javascript, you can use following snippet to override this:
.fusion-main-menu > ul > li > a {
line-height: 83px !important;
}
I would suggest checking/editing your javascript for this.
when you check your code, some javascript runs, after page load
for your anchor tag, line-height:83; is addded, which means, line-height is 83 times of your font-size.
<span class="menu-text">Home</span>
add an unit to line-height value - 83px
.fusion-menu>.menu-item>a {line-height:83px;} // you can !important if you don't want to fix it via javascript/jquery
You have line-height:83px for the links. Just set a smaller value (you have a single row, so it can be what you want).
.fusion-main-menu ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
.fusion-main-menu > ul > li > a {
height: 33px;
line-height: 33px;
margin: 20px 0;
}
I suggest you not adding style for menu from admin.
Add this and you are good to go
jQuery('.fusion-main-menu > ul > li > a').css('line-height','83px');
Related
I have some stuff I'd like to change in my dropdown. The website is https://community.entermedschool.com/
Below is the list of things I have tried along with the code I used. But none of them seem to be working...
Increase the font size for all of the items in the dropdown menus.
Change the font-weight for all the items in the dropdown to 400.
#primary-menu * {
font-size: 17px;
font-weight: 400;
}
Auto-scale the dropdown size so that all the items fit in one line.
.sub-menu {
width: fit-content;
}
Any help would be much appreciated!
Thanks in advance!
Edit:
The dropdown with which I want these changes is the primary header which I have highlighted here:
I want all of the dropdowns to basically expand automatically so that all of the content 'breathes' in it.
Your width: fit-content; is working but there is no space left for the ::after (the right arrow >). Therefor you could add a margin-right to each li in the submenu (for example 15px) and subtract that amount from the right-property of the ::after:
.sub-menu li {
margin-right: 15px;
}
.site-header .sub-menu .menu-item-has-children:not(.hideshow):after { {
...
right: 0; //instead of 15px
...
}
It works if i change it in the dev tools...
Currently working on http://getfitquick.co.uk/ but have come into an issue, when the menu is viewed on Tablets/Mobile the menu is currently active with the toggle constantly on, would really like to remove this so that the user is able to click menu and allow the menu to appear as opposed to it always being active.
Would also like to mention for reference that on http://getfitquick.co.uk/shop/ the menu is actually appearing how I want it to, however I am a bit unsure how I did this,
Is there anything anyone could suggest? Maybe something I may have done wrong within the process?
Thanks for reading,
On the homepage there's a css code that runs display: inline-block !important; for .menu .nav
#media (max-width: 768px) (index):251
.menu .nav {
position: relative;
background-color: #000000;
left: 0px;
border-color: #e51d25;
display: inline-block !important;
}
that code will override the default behavior of the mobile nav
at the top of that code, there's a comment that says
/*
The following CSS generated by Yellow Pencil Plugin.
http://waspthemes.com/yellow-pencil
*/
So I'm not quit sure if that CSS is directly generated from that plugin option on the homepage or if its from a custom CSS code assign to that homepage,
the best way to fix that is to look for that code, its should be somewhere in the Yellow Pencil Plugin
The second option though is really a bad idea is to modify and override it
CSS Override
header .menu .nav {
display: none !important;
}
header .menu.active .nav {
display: block !important;
}
then add active when the button is click and remove it when click again,
jQuery
(function( $) {
$('header').on('click', '.menu .toggleMenu', function() {
$(this).parent().toggleClass('active');
});
})(jQuery);
I really like how the FAQ page/questions look on the site I'm building using Squarespace. The only issue is that because of this structure, it also leads to a cumbersome drop down menu when you hover over the FAQ tab on the main navigation.
Here's a link: http://www.officialjerky.com/faq-1/
While it's certainly possible to set up anchored links in another FAQ page, I'm also sure there's a solution that will allow me to keep the structure of the page(s) and get rid of the drop down. Perhaps a bit of custom CSS that could make the drop down invisible?
There was a similar help thread that asked how to change the spacing between the items in the drop down, and the custom CSS input solution was: .primary-nav .folder-links-wrapper li { line-height: 0em; }.
Any guidance or input is really helpful. Thanks.
It's controlled by JS, so you may need a mini sledgehammer to override it. Try this in your CSS:
.subnav {display: none !important;}
Ideally, remove the script that is causing the behavior.
Regarding the + on small screens, on line 9865 of the stylesheet there is this:
#sidecarNav .folder label:before {
content: '+';
padding-right: .25em;
width: .75em;
display: inline-block;
}
You could either remove that code, or just add this to the stylesheet:
#sidecarNav .folder label:before {
display:none !important;
}
I have a Wordpress website built using the Sterling theme and I'm having issues with the menu displaying vertically instead of horizontally in Internet Explorer. I asked about it before here and ended up focusing on jquery errors that didn't fix the problem.
Here's a screenshot of how its showing up on IE9 for me.
Since then I tried changing the doctype to force the site to display properly but I've now realized that all the computers at work have IE9 permanently set to compatibility mode and changing that would mean going through the IT department.
I can't exactly tell my company the website looks wrong on your computers but right everywhere else and I do want to avoid errors for people using old versions of IE since the target market isn't tech savvy people, so could anyone offer advice on how I can get my menu to work right in quirks / compatibility mode?
I don't care if other aspects of the site aren't perfect but its practically unusable with the menu like that. I basically just need it to display horizontally instead of vertically, which I'm assuming is related to the CSS somehow.
EDIT: Added my CSS
The original code in the stylesheet is this
nav > ul > li {
display:inline-block;
position:relative;
}
nav > ul > li+li {
margin-left:28px;
}
And then I customised it slightly in the site options part of the theme (basically means my changes won't get overwritten when I update the theme) and my customization is:
nav > ul > li+li {
font-size:14px;
margin-left:10px
}
I think its something to do with display:inline-block; but nothing I've tried seems to make the menu horizontal again.
What css properties have you used for that ? You should do something like
#menu li {
display: block;
float: left;
width: 200px;
height: 40px;
}
#menu {
overflow: hidden;
}
I am trying to add custom images for social follow link buttons to my website sidebar menu. Right now I am stuck on the Facebook one as my first test, but ideally want to add others later. (which I am realizing might not be easy with the method I have chosen)
I tried using various methods, the most success I have gotten so far is the method at DIY Themes (this article) and on my site style.css the code I added is below:
#menu-item-127 a {
display:block;
height:83px; width:75px;
padding:0px;
margin-left:6px;
outline:none;
/*text-indent:-9999px;*/
background-image:url('/wp-content/uploads/2012/09/Grunge-Facebook-Stamp-small-sprite.png');
background-position:0 -82px;
}
#menu-item-127 a:hover { background-position:0 0px; }
The problem is that when you hover over the link the background image disappears, it does not transition to the "active" version of the sprite as it should.
Secondly the text does not indent off the screen, but stays on top of the image (I know that part is commented out in the code above, because I turned it on and off to test what was going on, doesn't make a difference)
Third problem is that the hover activation area is to large, it stretches the entire width of the menu bar instead of just right on top of the image. So if you are to the right of the image it is still considered "hovering", even though you cannot click on the FB link.
It seems to be related to some other part of my style.css because even if I remove the a:hover part of the above code it still makes the background image disappear. I have adjusted every variable and inspected every element that I know how, I am stumped on this.
My website is americagonepostal.com. The base theme is Hum.
BTW, I have never really done CSS before. I am doing this site as a favor for my cousin who is totally tech retarded, but is an artist so has very specific aesthetic expectations. I have just been hacking away without any idea what I am doing so if there is a better way to put images with links in that side-menu area, I am all ears. It does not necessarily have to "highlight" when you hover, but that would be a nice touch.
Ideally I'd like to add Facebook, Twitter and RSS buttons in the same grungy stamp style, but horizontally. Is that possible to fit all 3 buttons on one horizontal using custom menus as I have done?
Thanks.
Try this:
#menu-item-127 a:hover {
background: url("/wp-content/uploads/2012/09/Grunge-Facebook-Stamp-small-sprite.png") !important;
The !important will override any inherited styles
Text Indenting : Change text-align property in the branding section:
#branding { border: 0 none;
bottom: 0;
padding-top: 5em;
text-align: none;
top: 0; }
Then override the same way:
#menu-item-131 a:hover { background-position: 0 0 !important;
text-indent: -999px !important;}
This is only for a:hover if you need the normal state to be affected as well you have to use in-line styling ( not the best practice but in this case will solve the problem) :
<li id="menu-item-131" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-131" style="text-indent:-999px"> fb </li>
Third problem of hover activation area being too large:
#menu-item-131 a{ background-position: 0 0 !important;
text-indent: -999px !important;
width:75px !important; }