Currently working on a website for a client, who wants a custom navigation bar, which aligns with a background image.
A working solution is as below:
The issue I have is that when the browser is resized/certain desktop monitors, the navigation bar does not align with the background. The reason for this is I have coded in pixel values and not made it properly responsive yet, which is where i'm currently stuck. Could anyone guide me on how to make the angles change depending on the browser size/viewport in order to achieve the alignment i require across all desktop/tablet devices?
Can provide the code as required, the navigation bar is just a vertical menu with margin-lefts though.
.nav {margin:0; position: fixed; z-index: 9999999; left:734px; top: 79px; width: 200px;}
.nav ul {}
.nav ul li {list-style: none; border-bottom:1px solid #7c818c; padding-bottom: 10px; padding-top:11px; width:170px; font-size: 14px;}
.nav ul li:nth-child(2) {margin-left:27px;}
.nav ul li:nth-child(3) {margin-left:55px;}
.nav ul li:nth-child(4) {margin-left:87px;}
.nav ul li:nth-child(5) {margin-left:118px;}
.nav ul li:nth-child(6) {margin-left:146px;}
.nav ul li:nth-child(7) {margin-left:180px;}
.nav ul li:nth-child(8) {margin-left:205px;}
.nav ul li:nth-child(9) {margin-left:235px;}
.nav ul li a {color: #7c818c; text-decoration: none;/* text-transform: uppercase;*/}
.nav ul li a:hover, nav ul li a.active {color: #fff;}
Related
On this site, if I inspect "What We Do", I see the HTML code:
<a title="What we do – Mad Hat Media" href="http://test.doig.com.au/MHM/services/" class="sf-with-ul">What We Do<span class="sf-sub-indicator"> »</span></a>
with CSS code:
.menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator {
background: none;
content: '»';
color: #622C82;
}
I can't see why the content: '»' does not display. The CSS element has a width and a colour.
What is missing are the drop down indicators (indicated by the green arrows in the screen shot below)
Help appreciated.
I guess you should have a look at this class
.menu li a .sf-sub-indicator,
.menu li li a .sf-sub-indicator,
.menu li li li a .sf-sub-indicator {
background: url(images/arrow-down.png) no-repeat;
height: 16px;
position: absolute;
right: 5px;
text-indent: -9999px;
top: 13px;
width: 16px;
}
the text-indent property causes the >> to go AWOL. Remove that and you are kinda set. You may have to toggle other classes though.
As for the drop down indicators, they are very much present, just remove the background:none
On that note, content property is usually set to ::before and ::after pseudoelement. Do have a look into this mdn link .
As I can see in your code selectors .menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator look almost equal.
Anyway if you want implement content attribute it's better to write something like:
.sf-sub-indicator::after {
background: none;
content: '»';
color: #622C82;
}
http://imgur.com/a/hw1kb
Background image is set for this span.
Inspect it again:
.menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator {
background: url(images/arrow-right2.png) no-repeat;
}
I tried to check the issue multiple times in the top navigation but whenever I hover a menu the drop down always disappear. Here is the website http://dev2.websiteblue.com/vuerealestate/index.html. Any help will be appreciated. Thank you
change ul li a:hover+ul to ul li:hover a+ul
this is your final code:
ul li:hover a+ul {
display: block;
visibility: visible;
color: #9E0000;
z-index: 100;
}
Add Change ul li a:hover+ul to ul li:hover ul
Remove padding of .ul_navigation
change display: inline of .navigation > ul > li to display: inline-block
Add display: block to .navigation ul li a
I have a submenu in WordPress that was set up as a list in the following way:
.sidebar .widget { margin-top:20px; margin-bottom: 0px; padding-left:20px;}
.sidebar .widget h5 {line-height: 13px; margin-bottom: 30px; font-weight: bold;font-family: 'Droid Serif', Georgia, Times, serif; }
.sidebar .widget ul li { margin-bottom: 2px;background-color:#b3b1b2;padding:6px 2px; }
.sidebar .widget ul li a { margin-bottom: 2px;background-color:#b3b1b2;color:#ffffff ;padding:6px 2px; }
.sidebar .widget ul li a:hover { margin-bottom: 2px;background-color:#dadada;color:#202e3b ;padding:6px 2px; }
.sidebar .widget ul li a:active { margin-bottom: 2px;background-color:#dadada;color:#202e3b ;padding:6px 2px; }
See the page here: http://www.mahabbanetwork.com/who-we-are/
However, I would like the hover state to change the colour of the whole "bar" to the lighter grey, i.e. the full width instead of just the text-background which it is at present. I have played around with increasing the righthand padding but it, of course, increases it relative to the length/number of characters of the text link, which is different for each link.
This site uses a pre-coded WP template so I am not sure how to amend it to achieve the desire effect without messing things up elsewhere on the site.
Help would be greatly appreciated.
Add :hover to li
.sidebar .widget ul li:hover
{
background-color:#dadada;
color:#202e3b ;
}
Add the hover state grey color to .sidebar .widget ul li:hover instead of .sidebar .widget ul li a:hover
.sidebar .widget ul li:hover
{
background-color:#dadada;
color:#202e3b ;
}
So when I select the menu item from my drop down list, it disappears when it loads the link. I have verified that the menu items are set to display on all pages. Is this a css setting ?
Thanks
CODE: added per request
/*
# ------------------------------------------------------------------------
# Templates for Joomla 2.5 / Joomla 3.x
# ------------------------------------------------------------------------
# Copyright (C) 2011-2013 Jtemplate.ru. All Rights Reserved.
# #license - PHP files are GNU/GPL V2.
# Author: Makeev Vladimir
# Websites: http://www.jtemplate.ru/en
# --------- http://code.google.com/p/jtemplate/
# ------------------------------------------------------------------------
*/
/* all menu links */
#nav a, #subMenusContainer a{
text-decoration:none;
display:block;
padding:10px 20px;
background-color:#fff ;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
#nav a{
margin:0;
float:left;
}
/* Just sub menu links */
#subMenusContainer a, #nav li li a{
text-align:left;
}
/* All menu links on hover or focus */
#nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
background-color:#3366FF ;
color:#FFF;
}
/* sub menu links on hover or focus */
#subMenusContainer a:hover,
#subMenusContainer a:focus,
#nav a.mainMenuParentBtnFocused,
#subMenusContainer a.subMenuParentBtnFocused,
#nav li a:hover,
#nav li a:focus{
background-color:#3366FF ;
color:#FFF;
}
/* Parent Sub Menu Links ---[javascript users only]*/
.subMenuParentBtn{
background: url(../images/arrow_right.gif) right center no-repeat;
}
/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
.subMenuParentBtnFocused{
background: url(../images/arrow_right_over.gif) right center no-repeat;
}
/* Parent Main Menu Links ---[javascript users only]*/
.mainMenuParentBtn{
background: url(../images/arrow_down.gif) right center no-repeat;
}
/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
.mainMenuParentBtnFocused{
background: url(../images/arrow_down_over.gif) right center no-repeat;
}
/* ----[ OLs ULs, LIs, and DIVs ]----*/
/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{
display:none;
position: absolute;
overflow:hidden;
/*the 2px left & right padding lets you have a 1px border
on the ul or ol inside since overflow is set to hidden*/
padding:0 2px;
margin:0 0 0 -2px;
}
/* All ULs and OLs */
#nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
/* All submenu OLs and ULs */
#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {
/*border around submenu goes here*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background:#fff;
border:1px solid #3366FF;
left:0;
}
/* List items in main menu --[for non-javascript users this applies to submenus as well] */
#nav li {
/*great place to use a background image as a divider*/
display:block;
list-style:none;
position:relative;
float:left;
}
#subMenusContainer li{
list-style: none;
}
/* main menu ul or ol elment */
#nav{
display:block;
list-style:none;
margin:0 0 0 0;
z-index:5;
/* top:15px;*/
/* left:50%;*/
text-align: left;
display:block;
}
#subMenusContainer{ display:block; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; z-index:1000000000; }
/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
#nav li li{ float:none; }
#nav li li a{ /* Just submenu links*/
position:relative;
float:none;
}
#nav li ul { /* second-level lists */
position: absolute;
width: 10em;
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin-top:2.2em;
}
/* third-and-above-level lists */
#nav li ul ul { margin: -1em 0 0 -1000em; }
#nav li:hover ul ul { margin-left: -1000em; }
/* lists nested under hovered list items */
#nav li:hover ul{ margin-left: 0; }
#nav li li:hover ul { margin-left: 10em; margin-top:-2.5em;}
/* extra positioning rules for limited noscript keyboard accessibility */
#nav li a:focus + ul { margin-left: 0; margin-top:2.2em; }
#nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
#nav li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;}
#nav li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;}
#nav li:hover a:focus{ margin-left: 0; }
#nav li li:hover a:focus + ul { margin-left: 10em; }
Thanks, updated comments
It can be here:
/* All menu links on hover or focus */
#nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
background-color:#3366FF ;
color:#FFF; /* Try #AAF here */
}
/* sub menu links on hover or focus */
#subMenusContainer a:hover,
#subMenusContainer a:focus,
#nav a.mainMenuParentBtnFocused,
#subMenusContainer a.subMenuParentBtnFocused,
#nav li a:hover,
#nav li a:focus{
background-color:#3366FF ;
color:#FFF; /* Try #AAF here */
}
This CSS makes the color of the text white. THe background here is in not white but after in the CSS you have background:#fff; applied to #nav ul.
If this doesn't work you need to post your html, make a fiddle or post a live link.
I'm not sure if I formulated the question correctly, but let me try to explain what I want to achieve.
I'm trying to style navigation menu of a WordPress-based site.
I want the submenu links to be evenly arranged along the entire width of the website's <body> tag (960px wide). If the links of a particular submenu do not fit in one row, I want them to wrap around and arrange themselves in neat columns.
Finally, I want the submenu, when it drops down on hover, to push the rest of the website's content down.
Problem: the submenu unordered list affects the position of the links in the parent unordered list, moving the links around. Somehow, the only thing I could do to keep the parent menu links in place was to pull the submenus out of the way by applying margin-right:-965px;
Question: How should I modify my CSS to position both submenus all the way to the left, level with the edge of the main container?
(If necessary, I can assign custom classes to each submenu separately, for example: .submenu-about and .submenu-investors.)
Thank you in advance for your help!
Here's the complete CSS for the navigation menu:
.main-navigation ul {
list-style-type:none;
margin-top:45px;
}
.main-navigation ul {
display: inline-block;
width:70%;
float:right;
}
.main-navigation ul li {
float:left;
}
.main-navigation ul li a {
display:block;
margin:3px 0 3px 40px;
}
.main-navigation ul ul {
background:#efefef;
display:none;
}
.main-navigation li {
font-size: 13px;
}
.main-navigation li a {
outline: none;
text-decoration:none;
border-bottom: 0;
color: #6a6a6a;
text-transform: uppercase;
//white-space: nowrap;
}
.main-navigation li a:hover {
color: #000;
}
.main-navigation ul li:hover > ul {
margin:-1px -960px 3px 0;
display:block;
width:960px;
}
.main-navigation li ul li a {
font-size: 11px;
margin: 10px 0 10px 10px;
width:180px;
}
.main-navigation .menu-item > a,
.main-navigation .menu-ancestor > a,
.main-navigation .page_item > a,
.main-navigation .page_ancestor > a {
color: #9a9a9a;
font-weight:bold;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight:bold;
}
This Should do it
Add this to your css
.main-navigation ul li .sub-menu {position:absolute; left:0px;}
Found my own answer.
Remove the background from ul li:hover ul.
Set position:relative and the gray background for the ul li:hover >ul li.
Set individually the negative left margins for each submenu li item, to pull them left separately by different number of pixels.