We had a bad experience with a developer not sticking to timelines and what-not so we had to drop them. That being said, we're completing the site on our own and only have a few items left. One of which is a JQuery based navigation toggle that he made... it works fine for the main level of items but when you get into sub menu items, it stops using the appropriate CSS. I'm thinking this is a basic "add this to CSS" answer, but I'm not versed in CSS well enough to figure it out.
The CSS and what I think is the JS calling it can be seen here: http://jsfiddle.net/C8vwJ/
The issue can be seen here: http://74.124.14.50/connecting-point/outreach/ (note the + "toggle open" graphic on the sub-item beneath "Outreach" is on the "Y" of "BeYond"... so it's not being CSS'd to the right as it should be.
Any ideas? Thanks for looking.
Add this line into your CSS file.
.widget-area .current_page_item .page_item .toggle { right: 0; }
Trouble in these lines of css code - style.css line 1291:
.widget-area .current-menu-item .toggle, .widget-area .current_page_item .toggle {
right: 10em;
}
If I try to change this value both '+' link and '-' link moving. Try to brake these properties. I tried to do
<div class="toggle" style="right: 0pt;"></div>
(this can be applied by classname, not inline css)
Related
On my website on all pages except the home page, here's an example: http://www.pantsdownrecords.com/discography/, the issue I have been having is with the custom header. In the customer header div element where it says: “div class=”custom-header” and right after this is a style tag adding a margin-bottom of 82px. I have looked in all of the template pages and even the few plugins I am running right now, and cannot find where this style tag is being added. And since it is a style tag I can’t override it with CSS since style tags take precedence. Since this margin bottom is there, on some pages I can’t even see the footer because the page can’t scroll to the bottom.
Could somebody help point me in the right direction of where this issue is coming from?
All help would be greatly appreciated,
Thanks
It's in this file - http://www.pantsdownrecords.com/wp-content/themes/twentyseventeen/assets/js/global.js?ver=1.0
Under the adjustScrollClass() function. And you can overwrite an inline style with !important in your CSS. You should use that feature sparingly, but it works if you need to overwrite an inline style.
You could open more files in notepad++ and use search with Find in all open documents if you want to find a specific string.
You could change this with CSS by using !important for the specific element or check with javascript or jQuery for pages where you have the problem and set the specific styles.
CSS:
.custom-header { margin-bottom: 0px !important")
JavaScript:
var winURL = window.location.href;
if(winURL == "http://www.pantsdownrecords.com/artists/") {
document.getElemetsByClassName("custom-header")[0].style.margin = "0px 0px 0px 0px";
}
jQuery:
var winURL = window.location.href;
if(winURL.indexOf("artist")) {
$(".custom-header").css("margin","0px");
}
I found some examples on bootstrap side and top navigation. I got it work almost as I would like to, but there are some things I can't make it work:
Here is jsFiddle of a working example.
1) How to add active class to a clicked item in the menu and remove active class from the one before?
2) How to change icon to down-arrow when expanding Menu and when closing back to left-arrow?
3) All examples which I found on the internet with admin panels similar to this one had independent pages. So if someone click Menu Item it loaded Head, body section and all the scripts again, so I decided to create one file with top and left navigation and only load content on menu item click like:
$(".side-nav a").click(function(e) {
e.preventDefault();
$("#page-wrapper").load($(this).attr("href")); //some filename.php
});
is this the right way to do it? (I noticed that I had to remove my .htaccess with Order deny,allow Deny from all)
For your first question, you should get from your php code the current page and compare it to the clicked link (a), so then you can check on the page load what link is active. if it is a one page with sections and each item is just pass the user to the anchor (of the item id) -> You should fix the code to be nicely, sorry, i have no time to make more then this now :(
$('.side-nav').on('click', function(e){
$('a').removeClass('active');
$(e.target).addClass('active');});
For your second question use the following css
[aria-expanded="false"] > i.fa-caret-left { transform: rotate(0deg); transition: all ease-in-out .4s; }
[aria-expanded="true"] > i.fa-caret-left{ transform: rotate(-90deg); transition: all ease-in-out .4s;}
For your third question, i'm not sure i understand what you try to do.
If i guess true, you are trying to inject "html" inside #wrapper element?
If so, yes, you can do so.
If you want to redirect to $(this).attr("href") link value, you should write it like this:
location.href = $(this).attr("href");
Hope i helped you.
I am building a website for some local business and I can't figure out what is causing the side scrolling. I must have been really tired and messed up somewhere. Any and all help would be wonderful. The link to the site is http://theparkwayrv.com
If you look, you'll see that there is a side scrolling bar. Please let me know if you can figure it out. I've gone over it like 10+ times and i'm losing my mind right now.
Thanks!
Add
body {overflow-x: hidden;}
to your CSS.
Generally, this is due to having items with width or min-width set to 100% or 100vw in your page. When the browser adds a vertical scrollbar to it (17px in Chrome), it makes it 100% + 17px, hence the need to add a horizontal scroll. This, however, doesn't happen on most mobile UI's and any browser that uses semi-transparent-show-on-scroll-only scrollbars.
As very well spotted by Tersosauros, the only one who, instead of providing a quickfix, like the rest of us, actually took the time to look for the real cause of your bodys extra width, in your particular case, this is due to using Bootstrap classes incorrectly. You used .row independently, without being a direct child of .container and the page is wider with 30px.
However, the quickfix still solves it. At least in this life, we're mostly payed for solutions, not for being right. Right? :)
This issue is being caused by the 15px left and right margins on .row (line #7, bootstrap.min.css) affecting the child div within the parkway_about_page div. This is part of how Bootstrap expects your page to be structured, as pointed out by #Andrei Gheorghiu . If parkway_about_page were also a .container bootstrap would fix this for you.
Either option fixed it for me:
Add (as the many other 1-line answers with no explanations have suggested) overflow-x: hidden; to #parkway_about_page.
--- OR ---
Remove the margin(s) from the .row div underneath parkway_about_page, (or just remove the class entirely).
Use this css to your body section:
body{overflow-x: hidden;}
Try this...
body {
overflow-x:hidden;
}
add this to your css file :
body{
overflow-x: hidden;
}
in body just put overflow-x: hidden
Alright, so I have an HTML form and I want to be able to use that form to upload links to my database and then have the links displayed on an updated page. Everything works fine, but my issue is that whenever the link is retrieved and displayed from the database, I am unable to make changes to the CSS. For example:
This is a Great Site
is what I would enter into the form, this would be saved to the database, and the output would be:
This is a Great Site
my issue is, I am unable to change any of the link styles outside of color and other inline CSS options. I am unable to change things like what color it appears after the link has been clicked on, or what kind of action it does when hovered over.
What would be the easiest way to go about this? Is there a simple CSS workaround that I'm missing or am I going have to do something a little bit more complex?
Thanks in advance.
Assuming you show these links in a fixed place, add a class to the element that contains these links. This will safe you the trouble of adding a class to every link you add.
<div class="container">
This is a Great Site
</div>
Then you can change the CSS of these specific links with:
.container a {
color: green;
}
.container a:hover {
background: yellow;
}
I don't get your question.
Your link is 'www.stackoverflow.com'.
You output your link as
This is a Great Site
What prevents you from outputing a class or style attribute?
This is a Great Site
This is a Great Site
<a class="myOtherLinkClass" href="www.stackoverflow.com">This is a Great Site</a>
<style>
a.myOtherLinkClass,
a.myOtherLinkClass:hover,
a.myOtherLinkClass:active,
a.myOtherLinkClass:focus{
color: #d5d5d5; //Alternative add !important to the value
}
</style>
Try it like this. Be sure to put this into your .css-File without the <style> tags and put it after your "a"-Definition.
I am using a very simple free Wordpress theme that I am really happy with but I cannot figure out how to move the names of the budgies along to the right:
http://swearingbudgies.co.uk/
I have tried Firebug to find out how to do this but the only tag I can see is a: - problem is when I apply padding-left to a: it also shunts the images along. Will this require changes to the html/php as well as the CSS to fix?
Add the following class in your CSS. Next time onwards don't come up with site url. Add your problem in fiddle/codepen or something like that and post here your code. Otherwise people will give downvote and close your question including me.
a.image_link + div
{
text-align:right;
}
try
#main-content div.post div{
text-align:right;
}