I have two spry menus on one page. One is main site and one is that individual page's menu that shows and hides div accordingly.
The "artistMenu" div doesn't work and it doesn't even have the hover effects, although it's set up exactly like the site menu apart from the different UL id's
<div id="artistMenu">
<ul id="MenuBar2" class="MenuBarHorizontal">
<li>Social</li>
<li>Music</li>
</ul>
<!--Artist menu end--></div>
CSS:
#artistMenu{
background-color: #000;
}
The main site menu is set up virtually the same way except it's in the header div with logo and has no background.
If I comment out the <div id="artistMenu"> the link's work however, I lose my background color and the contents below the menu, for whatever reason because un-styled as the pop out of the <div id="gridContainer"> and and spread the width of the page.
I've worked on this for 5 days off and on and can't figure it out nor find info online.
Related
I have a floating top navigation menu that I recreated # http://codepen.io/micsad/pen/mmzrZO
I made one menu item stand out by giving it a different background color with a CSS id.
#promonav {
background: gray;
}
It looks OK when you can see all the menu items in the browser, but resize the browser and #promonav item starts to jump around uncontrollably. It's no longer aligned with the top nav menu.
Is there anything I can do to:
a) keep the floating navigation fixed to the top of the page
b) stop the stand-out menu item with a different CSS class/id from jumping around on smaller desktop screens?
Thank you
I have a problem adding a dropdown to a Twitter Bootstrap framework. After I have added the dropdown it expands height of the whole topbar and this is what I'm trying to fix.
Page URL is http://locabikes.de/
If you hover the mouse on the "DE" symbol in the upper right corner, the dropdown will show up but the topbar will also change it's vertiacal size covering the navigation bar.
Is there some way to only show other languages to choose without changing the size of a topbar?
This is the code I'm talking about:
<div class="col-sm-12 col-sm-no-pd">
<ul id="lng">
<li>
<span>DE</span>
<ul>
<li>EN</li>
<li>PL</li>
</ul>
</li>
</ul>
<div id="topSocial">
</div>
This is how I want it to look like after hoovering on the current language hyperlink.
Since you are using bootstrap I should suggest changing the markup of ul#lng to the markup given by bootstrap documentation for dropdowns.
http://getbootstrap.com/components/#dropdowns
Dropdown by default works on click but with the following tweak it will also work on hover:
http://www.joostrap.com/support/tutorials-videos/202-how-to-enable-hover-for-nav-dropdowns
Hope this helps you :)
Turned out I only needed to remove
overflow: hidden property from the parent #topbar div and it started working.
http://joshhornby.co.uk/skinnybeer/index.html
As you can see when you click on 'The Booze' in scrolls down to the first item in the container not the area where the div is.
The nav html is
<li>The Booze</li>
and linking to a div id called booze.
<div id="booze">
It seems to be linking to the image or the container and I am not sure how to make it scroll to the header not the image.
It is linking to #booze, you just have a position: fixed element covering it up.
I'm using the simplest HTML 'overflow: scroll' type mark-up for creating a scroll bar within multiple div containers to display text and image content within the scroll. I have it setup within tabbed content areas, that are pulled together calling divs within the tab links. I'm trying to figure how, if possible, that when a user browses to a different tab and then back - to allow that scroll bar to reload to the top, ready to scroll downward again.
Pretty much, the mark-up;
<li class="newtab">
<!--JS Rollover Button for Tab-->
<img src="img/Btns/tab_recordedattack_off1.png" name=tab_recordedattack_off1 border=0>
<!--End JS Rollover Button for Tab-->
</li>
</ul>
<div class="tab_container">
<div id="tab13" class="tab_content">
<div class="tabright">
<div style="border:0px solid black;width:500px;height:400px;overflow:scroll;overflow-y:scroll;overflow-x:hidden;">
I've been thinking about trying to set a simple html anchor point at the top of scroll areas and somehow call to it within the tab links - but can't figure out how to do that.
Any suggestions? - How can I point the tabbed links to the content and the anchor point?
You can use jQuery to reset the scroll: http://jsfiddle.net/Cqhch/
$("button").click(function(){
$("div:first").scrollTop(0);
});
I've got a css-based horizontal drop down menu that works perfectly well, but I'm having trouble adding an effect that adds a top border on the item that represents the page the user is currently on. Here's the HTML code for the dropdown:
<ul id="browse">
<li>
Comedy
<ul>
<li>Caddyshack</li>
<li>Back to School</li>
<ul>
</li>
<li>
80s
<ul>
<li>Die Hard</li>
<li>Overboard</li>
<ul>
</li>
</ul>
Here's what I want:
Hovering over an item changes its background color, as well as the background of the dropdown (the nested ul element)
On the active page for an item, that item should have a 2 pixel tall colored border at the top.
Just to be clear, the dropdown already works fine, and I can already identify the "active" menu item. I just can't seem to figure out how to combine changing the background color on hover and adding a border-top on the active menu item without messing up the style of the menu somehow (either leaving a 2px tall blank space on hover, or having the hover background property override the border-top property on the active item)
I should also add, CSS-only solutions please.
Any help here would be much appreciated.
For the background color, it's fairly simple, just use code similar to this:
#browse a:hover {
background-color: fuchsia; /*Whatever your background color is*/
}
As for the border effect, that's a little harder to do semantically, but I feel that this article on CSS specificity would do the trick. Basically, it involves adding an id to your body, and then referencing that id in the CSS so that only the specific pages will be affected.
EDIT: If you're having issues with your top border affecting layout (I don't know what orientation the navigation has), try reducing the margin or padding you have on each item by the size of your border (2px, in this case) to maintain overall box height. If you don't have any margins/paddings, try negative margins.