Here's the website I'm working on: http://104.193.173.104/modx/
The top navigation has 2nd and 3rd levels that are generated by Wayfinder in ModX. As far as I can tell from the page source and chrome inspector, they are generating properly and have the appropriate CSS classes. When I click one of the nav links, the inspector shows the li class change to "dropdown open" and a ul class "dropdown-menu" appears. I can see the outline in inspector, but nothing is showing on the page.
I'm guessing this is a z-index problem in my CSS, but I'm not very familiar with how all of that works. Is anyone able to help me? Let me know what HTML/CSS you need me to include and I'll edit this post. Cheers!
note: My jQuery is called in the head of each page
Your navigation div (#main-navigation-container) has overflow:hidden. You'll need to figure out what you want to do there but that's why it's being "cropped" out.
Related
im brand new to coding and in a mad rush to get my website finished before i have to put it live in 4 days. im having serious issues with the menus on my site. i used a drag and drop editor to build it and am customizing small parts using the html element tool where i need to. The problem im having is that the editor as far as i can tell only uses one master css file for styling the menus... which means all my menus regardless on "in editor" settings have 15px padding around them. This is a huge issue for my footer which contains TONS of links. I need to find a way to apply css to only the menus in the footer. (there are a few coppies of the master page meaning theres actually a few footers, one for each master page)
sadly as im so new to code i dont really know what the hell it is im doing here.
but in short i just need to be able to make a little piece of css for my footer that i can apply that will only affect the menus in it and no where else
i dont want to paste the code in here as part of this question as i dont really kno what part to look for and what little i have looked into my code would be like 5 pages long or something. so please if you can help me just let me know what to look for or how to find it (im good at using the google chrome inspect tool) so i can paste only whats needed.
just in case it helps heres the current link to my website.
http://sites.simbla.com/fd066dd7-48f1-6002-53ae-f18c93075f27/careersart_art?misc=1475010324849
I suppose you don't have the options to add classes to your editor. Your footer does not use a footer tag, rather another instance of the div with class 'containerHolder'. What you could do (since the footer is the last instance of this class) is to use the css :last-child selector.
Your code would look like:
div.containerHolder:last-child li {
// css rules here
}
This will only target items inside of your footer. This is not the greatest method, but possibly the only one since you don't have control or knowledge of the markup itself. The above example would only target li's inside of your footer.
I'm not 100% on what you are wanting but you can select all the menu items by using #MP485 ul li as the selector or if you want the links #MP485 ul li a so if you want to edit the padding you can use something like this:
#MP485 ul li {
padding-bottom: 2px !important;
}
If you use !important at the end this should override any other styles.
I am usually pretty used to find out my own issues when it comes to Bootstrap styling and elements, but this one.. just keeps giving me a headache, and therefore i need to ask you guys here.
I'm overriding some bootstrap styles, like the dropdown (hamburgermenu trigger dropdown) so it goes on top of other elements, rather than moving it downwards..
If you inspect my JSFiddle example after expanding the menu you see that i'm missing the relation to :
.navbar-default .navbar-nav>.active>a
.. the styling is completely gone, and i dont know why.
Here is a link to my JSFiddle
Found the issue.
its here in this HTML
<a id="lnkTeamOverviewMobile" style="color:black" class="visible-sm" href="/EventCalendar" href="javascript:__doPostBack('ctl00$lnkTeamOverviewMobile','')">Eventkalender</a>
you have a class visible-sm which is set to display:none!important in bootstrap.css , If you use this class you are saying that to display this element only when you are in a small device, And Computer Monitors are usually Medium..
Remove the class visible-sm and it must work fine
Working Demo
My site is [manayunkfarm.org] (sorry, can't post more than 1 link), My issue is that if I add more than 4 pages to my menu navigation, the navigation "hamburger" icon slides into white space on all pages with a shorter header image. (Click around the site and use the drop down navigation and you should get an idea of what I'm talking about.
I've mocked up what I'd like for it to look like,
mockup of possible new navigation
I figure it should be fairly easy to adjust the with of each navigation box in half, then create 4 more boxes, doubling the number of pages I can link to, in the same amount of space. Does anyone know where I would have to go in my wordpress editor to edit this and how?
Thanks
Well, for starters, opening effect and the stacking of the menu items are being handled by some jquery/javascript somewhere.
What you can do is use String Locator to locate which part of the code is responsible for changing the css of the #nav element. Then, change the code according to your preference. But, if you are not used to scripting then this will be tough.
The way out, which is my suggestion is that, change the color of the menu button.
Change it from white to the pink color being used for the menu link hover : #DBBFBE
If you want to go ahead with thi suggestion then:
Go to Appearance -> Editor. Generally, the editor should open style.css which is the default stylesheet of your theme.
Search for : #nav-toggle
Change the color attribute to #DBBFBE from whatever it is, I think its #ffffff;
Thanks.
I've been customizing a Wordpress Theme (iconic-one) for an aquintance of mine. Everything is going according to plan, but I've ran into a problem.
I've modified the style of the navigation bar slightly, but one of the elements is not adjusting accordingly.
The problem is that when hovering over a child element of a dropdown, the parent element in the navigation bar goes back to the original color, which is blue.
Uploading the relevant code is an issue, as I have no idea what is causing the problem.
For reference: oefentherapievanuitdekern.nl is de website, you can see the problem occur on the main page.
Is there anyone who can point me in the right direction for a solution? Any help is greatly apreciated.
Kind regards,
Bik
as I can see, there are two diffrent Stylesheets overwriting each other, i am not that deep into Wordpress, but maybe in ur Theme u can define hover color and aktive color
AND maybe hover color for sub-menu?
otherwise u have to work with code :P
As the title states I'm having a bit of trouble with an element on my 'work in progress' website.
I currently have an unordered list which provides square sections (with a different image and link in each) On a hover, the image changes opacity and the background color changes also.
The problem I'm facing is that while the cosmetic effects are all working fine, the link is not working on click. (However, the link does display in the bottom of my browser as 'followable' and right clicking allows for following the link through the options there.
The link for the element is http://www.techcom.co.nz/#myclients
and currently the only element with an attached link is the img for steam. (Column 2, Row 2)
Any help anyone can offer would be greatly appreciated.
Regards
Add the following code to your images...use javascript
example
<img src="" alt="" onclick='window.location="URL HERE"'>
please remember not to get the quote marks mixed because it will not work otherwise and looking at your source you have no URL the images should be going to apart from #
I don't understand exactly what's the problem.
The links on "my work" section are not working because the links to "#" (none) try to give them real url.