I've got a horizontal menu block in Drupal that has a repeated background image.
I'm now trying to make a drop-down menu for the menu's children.
The problem I'm having is that the background image repeats for the width of the entire menu and the height of the drop-down menu when the drop-down is active.
I understand why that is happening, but can't think of an elegant way to solve the problem. Using the background image on just the buttons should work, but then the background wouldn't extend to the edges.
Is there a way to restrict the height of the repeated image? If I can restrict the height, I can set it to the height of the parent menu. Any other suggestions welcome.
How about this? Don't worry about my method of hiding/showing the menu (or the cheesy background)
I added a class for the submenu, just to simplify the code.
The trick is to specify the height of the menu and then set overflow to visible.
working code here: http://jsfiddle.net/cockypup/Fs3WV/
This is the CSS
#blockmenu {
background-image:url(http://t1.gstatic.com/images?q=tbn:ANd9GcS3LkgeI7h_C9w5PbHx_mIuVETgzO2NqJJdOSet-va1t6Q8nUAj);
height:30px;
overflow:visible;
}
#blockmenu ul li {
display: inline;
padding-right: 30px;
list-style: none;
color:white;
position:relative;
}
.sub {
display: list-item;
list-style-type: none;
padding-left: 0;
display:none;
position:absolute;
top:50px;
width:60px;
}
You can use the attribute background-size to indicate the size of the background.
Check out this page for a full description of the attribute:
http://www.css3.info/preview/background-size/
Related
I am trying to modify the CSS code for the underlying Worpress theme for this site: https://isspm2021.webs.upv.es/. The theme is this one: https://wordpress.org/themes/escapade/.
What I am trying to do is get a vertically scrollable left menu when the screen size is, say, 1024 × 768.
This is what I get now:
As you can see, the last items of the left menu remain hidden and inaccessible, depending on the screen size. I would like the left-hand-side menu to be vertically scrollable when needed.
I've tried several CSS instructions, like overflow:scroll, without success.
I think it is because of the theme itself; more precisely, because of the way the different div elements are defined to be placed regarding others (position:relative and so on).
Any hint of how to modify the CSS style of this theme to get what I need?
I would suggest these for the menu to be scrollable:
Set a height for the menu part,
Set Overflow-y:auto;
Here's the solution:
.main-navigation-container, .main-navigation.open, .main-navigation ul ul, .main-navigation .sub-menu {
background-color: #f5f5f5;
overflow-y: auto;
height: 400px;
}
Also, If you want the scroll to appear when the browser size is less than 1024px, put the code below:
#media all and (max-width:1024px){
.main-navigation-container, .main-navigation.open, .main-navigation ul ul, .main-navigation .sub-menu {
background-color: #f5f5f5;
overflow-y: auto;
height: 400px;
}
}
The above are two options.Please don't insert both of them.Only use one at a time to see the changes.
If you can accept the full left navbar scrollable, you may add overflow: auto property in .side-masthead:
.side-masthead {
background-color: #f5f5f5;
overflow: auto; /* Add overflow property */
}
I am struggling with something.
I have two menus (http://www.omicronsolucoes.com/mat/), and I need the logo to be over the first menu. For this, I added a z-index:1 on the first menu.
But now the links on the first menu wont work (because the z-index made them go behind).
How could I maintain the logo as it is and make the links working again?
Thanks.
Try adding this to your css, not sure from where it is coming but nav#ubermenu-main-13-header-menu is getting z-index as -1, so either you add this to your css file
nav#ubermenu-main-13-header-menu {
z-index: 999 !important;
}
or try removing the z-index -1 from where is it getting applied
Try adding position relative and a greater z-index to the li. Then either remove position:relative of the ul or override it with position:static:
.ubermenu-nav{
position:static;
}
.ubermenu-nav > li{
position:relative;
z-index:11;
}
I have added margin-top:-50px; to .logo class
nav .logo {
max-height: 100px !important;
max-width: 200px !important;
margin-top: -50px;
}
I am attempting to make a drop down menu go to the right with HTML and CSS, I have the example here:
http://codepen.io/anon/pen/RNLmvq
Here is a screenshot of what it looks like without the text from codepen.
http://s22.postimg.org/bd5sc51ap/sidebar.jpg
If there is any other additional information you need from me, please ask.
Thanks
I have looked at your code but the answer seemed quite clear, not sure if it's what will be the right answer but I've modified it to work for what you've described. If it's not what you're looking for please describe more details about your site needs.
http://codepen.io/anon/pen/KwXjaa
I've changed your aside css to 'float:right' from 'float:left'.
aside
{
float: right;
width: 164px;
margin: 12px 0px 0px 0px;
padding: 0px;
border-right: thin dashed #2446ff;
/*background-color: #ff0000;*/
}
update
I've cleaned up your HTML and re-arranged where the placement of the class 'Schedule' was to be put.
http://codepen.io/anon/pen/KwXjaa
in your HTML I've placed 'Schedule' class onto the li.
CSS now for schedule is as follows:
.Schedule ul li{
display:none;
}
.Schedule:hover > ul {
position:absolute;
top:36px;
left:168px;
background:blue;
display:block;
}
.Schedule:hover > ul li {
position:relative;
background:blue;
display:block;
}
I've cleared out most of your other CSS you had in there before, wanted to provide you with a clean html/css snippets so you see exactly what you may need to include when you integrate.
What's happening in the above is your 'Schedule' class is on an li, the class is telling all the ul's with li's below that li that has 'Schedule' assigned to it, that they're to display none.
When you hover over schedule, the ul's that the browser finds that are layered under 'Schedule', will display block again and have absolute positioning.
I then made it so that 'Schedule' class on hover of first ul li sets the li's to relative positioning(otherwise all li children will stack ontop of each other which you don't want) and set display to block so they're visible again.
What is the best no JS way (most commont browsers friendly) to achieve this?
I have found a few related questions & answers:
width: 100% / number_of_li-s_in_ul;
http://jsfiddle.net/qx4WG/ ("static" calculated size for each li) - unable to use due different sizes of li
li {display: table-cell;}
UPDATE: http://jsfiddle.net/jwJBd/1035/ -> works good, but I'm also using sub-menus and position: relative; doesn't work here to position the sub-menu below current li. When position is set to static it enlarges the parent LI every time it's set to display:block;
display: box;
never used it before, just read a few articles and it looks like the browser support is minimal
If i understood your question correctly, you want to display evenly menu elements like a table would do AND be able to display css sub-menus using absolute and relative positioning.
Your jsfiddle was close, the only thing i had to fix was the positioning of the sub-menu
.sub-menu {
display: none;
/*left: 0;*/ /* i removed this */
position: absolute;
/* PLAY with this */
}
jsFiddled here
[post edit]
It would also be relevant to set your <li> parent with a table-layout:fixed property. This way, <li> will be set to equal width.
#horizontal-style {
display: table;
width: 100%;
table-layout:fixed; /* try this */
}
I'm trying to center the menu bar and make the menu bar fit the text.
Here is a website I'm trying to edit:
http://www.graffitisumperk.g6.cz/blog/
I've already figure out that I can center menu items this way:
.menu {
text-align:center
}
.menu li {
display:inline-block;
float:none;
margin-left: -5px;
}
.menu li li {
display:block;
text-align:left
}
But I can't seem to fit the menu bar to the width of the menu items.
I've calculated it should be 445px long, but when I change this:
#container {
margin: 0 auto;
max-width: 960px;
to 445px, the whole page it affected, not just the menu bar.
Any ideas how to fix it?
You can do it very very similarly :). One of the effects of display: inline-block; is that the element attempts to resize itself to contain its children. You could achieve this with float or position: absolute as well, but those do not really fit into this layout.
.main-nav { text-align: center; }
.menu { display: inline-block; }
I guessed you might want to center the menu, so I added the text-align too.
Tip: If you use the inspector of your browser (all modern browsers have a pretty decent one), you can easily figure out which element you need to change.
When I looked at your page, it looks like the part you really need to change is the "main-nav" class.
The #container div contains your whole page so you don't want to mess with that one.