How can the drop-down user menu be displayed above all elements? In this case the menu (in Secondary Header ) slips under Page Title.
I'm using the "drop_down_login-7.x-1.3.tar" module
which css rule I must use?
Best Regards See Image Example
Did you try z-index? Find the z-index of the overlapping element and then add a higher index for your pop-up.
https://www.w3schools.com/cssref/pr_pos_z-index.asp
You can use z-index in your css, but it must be higher than other divs which overlap on your dropdown.
I've got a pretty specific issue I'm running into and the theme developer has gone MIA.
I have linked a screencap of what the issue is and I'll try and describe it as best as possible here, too. If more info is needed, just let me know and I'll provide as much as possible.
Screencap: http://tinypic.com/r/53le1l/8
I'm using a pretty modified version of this theme, but nothing that should have an affect on the functionality of the theme:
http://www.themes.red-sun-design.com/?theme=lemonchili
As you can see - the homepage is designed to display widgets, each in their own container, as opposed to a custom page layout (we're ignoring the top slider as that isn't an issue). The widgets that are included in the theme work just fine and size correctly with whatever content is displayed.
homepage layer structure is (from back to front): background image --> sidebar/menu & page background--> page content (slider and widgets)
The issue is, with third-party widgets/plugins and pretty much any interactive content, those containers do not expand correctly and end up leaving the majority of the content not visible.
I'm using the plugin EventON (www.myeventon.com) and if a month has 2 events, as shown in the screencap, it displays fine. (NOTE: when an event is clicked/selected a lightbox pops up with event info - this isn't an issue) But if a month has 2+ events, the box resizes to display the info, but does not resize to fit everything else on the page.
If you look at the original theme demo, each box has spacing between each widget.
When you look at the screencap, you'll see that the spacing goes away and the extra events are (I'm assuming) being displayed underneath the widget below the eventON widget.
What I need is to make each of those containers responsive to the content that is being displayed in each one, regardless of the placement on the page while maintaining the same spacing between each widget container. Also, the actual page background needs to expand to meet content too, which doesn't seem to happen.
I've been trying to find a fix for about a week and am completely stuck.
Does all of that make sense - if this is confusing or if I'm not explaining it correctly, let me know.
Thanks.
The template has a very stiff design because each content div section (Hours, Latest Images, Lunch Special, Next Event, The Latest, and About) are absolutely positioned within the container div, and as far as I can tell, overflowing content is even hidden at the bottom of the main content section.
Using the Red Sun Themes as an example: You are correct, the overflowing contents from the "Latest Images" section (where you have your plugin) is displaying underneath the "Next Event" section.
One quick solution is to give the "Latest Images" div (this is the one that holds your plugin) a higher z-index than "Next Event". That way, it will display on top of "Next Event", instead of underneath it. Luckily the plugin isn't overflowing by much. Remember to give a z-index to all 3 divs in the column. Example: z-index:10; for "Latest Images", z-index:9; for "Next Event", and z-index:8; for the bottom "About" div.
Next size the height of your div to always have enough room for the plugin. Min-width may work well.
Then move "Next Event" a few pixels down so the overflow from "Latest Images" won't overlap its top. You'll probably have to move "About" down too.
Once you move the other 2 divs down, the bottom div might push past the bottom of the container, and its bottom contents may be hidden. One solution is to decrease the height of the divs by reducing font sizes/padding... Another solution is to increase the height of the main div that's directly under the container div. It looks like the height is in the html code too.
Note: From this end it appears that the template holds the div styles in the html code, so you may have to make your adjustments (z-index, top positioning) there.
Another solution would be to add a scrollbar (add width, and overflow:auto;) to the "Latest Images" section, so when the plugin overflowed, there would be a scrollbar. But then the content area would be effected by the size of the scrollbar.
I have a wordpress plugin that puts social icons at the top of my website. The problem is though the div is outside the main body div (or wrap div). Therefore, when I change the width of my site the social icons move relative to the browser window and not no the actual content of my website. Normally it would be as simple as just moving that div outside the wrap div to inside it, but it is a plugin and the structure of the plugin is nasty in that the div structure is in a minified javascript file and not in a nice HTML/PHP format.
So if you go to my site: http://warringah-plastics.com.au/ you can see the social icons in the div "dcsmt" in the top right hand corner and I want to position it to the left of the website search box where those existing social icons are. How would I do this? So I really want to put the "dcsmt" div inside the existing "top-cont" div. Thanks!
Create an empty div and give it a name "social_icons_wrapper" in your header near the search box where you want the social media icons.
Then call the following javascript from your footer:
var div_to_move = document.getElementById('dcsmt');
document.getElementById('social_icons_wrapper').appendChild(div_to_move);
I recently installed a drop down menu on my main menu bar and noticed something. The H1 header directly below it moves on the page when I activate the drop down menu. It's like the drop down menu pushes the text out of the way because it is in the way. The header or text moves back when the drop down menu is released. This also happens on other pages with text below. What is causing this and how can I correct it?
It's impossible to say with 100% certainty without seeing your markup, but I'd guess the nested list (ul) in your menu doesn't have it's position set to absolute. Setting it to absolute takes it out of the flow of the page so it appears above other content rather than forcing any content below it down. Show your markup and I can say for certain.
I'm building a website, and would like to make aa navigation bar with submenus. My menu items are entirely image based. I have an image for each item, and each item hover. I'm just not sure how to go about doing it this way, I only know how to make one without use of images. Thanks
do the same thing like you would do with textbased navigation. after you've finished set your li a {text-indent:-9999px} this will hide the text description (this is anyway nice to have for mobile and seo), now create an image-sprite with your images and position them nicely with in css with the background-position property.