The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Issue with :hover on mobile

View previous topic View next topic Go down

In progress Issue with :hover on mobile

Post by ShadesOfJay on February 14th 2015, 7:34 am

Technical Details

Forum version : phpBB2
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : Yourself
When the problem appeared : When I am on my phone.
Forum link : no link

Description of problem

So, I created a navigation bar for my off-link site for my forum. When it hovers over, the drop down menu appears. How can I make this work additionally on a click, like if you are on a mobile device.
http://virtuous-realms.tk/
Also, how do i make the nav bar expand across screen?
<hr>
HTML
Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    
    <meta charset="UTF-8">
    
    <title>Virtuous-Realms</title>
    
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
    
    </head>
    
    <body>
    
    <!-- *********************************************************************************************
    
    Create a Drop Down Menu with Search Box in CSS3 and HTML
    
    Links:
    http://designmodo.com/create-drop-down-menu-search-box
    
    ********************************************************************************************* -->
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
    <title>Create a Drop Down Menu with Search Box in CSS3 and HTML</title>
    <meta name="robots" content="noindex,follow" />
    </head>
    <body>
    <ul class="nav">
    <li id="settings">
    <a href="#"><img src="http://i1077.photobucket.com/albums/w468/airianateply/419px-Paw-print_zpsc977e2b9.png" style="max-height: 45px; max-width: 50px;" /></a>
    </li>
    <li id="options">
    <a href="#">Virtuous-Realms</a>
    <ul class="subnav">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Site History</a></li>
    <li><a href="#">Newsletter</a></li>
    <li><a href="#">Comic</a></li>
    </ul>
    </li>
    <li id="options">
    <a href="#">RP Content</a>
    <ul class="subnav">
    <li><a href="#">RP Updates</a></li>
    <li><a href="#">Territory</a></li>
    <li><a href="#">Virtues & Spirits</a></li>
    <li><a href="#">Pack Legend</a></li>
    </ul>
    </li>
    <li id="options">
    <a href="#">Our Members</a>
    <ul class="subnav">
    <li><a href="#">Staff</a></li>
    <li><a href="#">Insert Rank</a></li>
    <li><a href="#">Insert Rank</a></li>
    <li><a href="#">Insert Rank</a></li>
    </ul>
    </li>
    <li id="options">
    <a href="#">Member Section</a>
    <ul class="subnav">
    <li><a href="#">Announcements</a></li>
    <li><a href="#">Weekly Checklist</a></li>
    <li><a href="#">List of Members</a></li>
    <li><a href="#">EFA Form</a></li>
    </ul>
    </li>
    <li id="options">
    <a href="#">Guest Section</a>
    <ul class="subnav">
    <li><a href="#">How to Join</a></li>
    <li><a href="#">Newbie Guide</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Join Here!</a></li>
    
    </ul>
    </li>
    
    <li>
    <a href="#">Contact Us</a>
    </li></ul>
    <tr class="blank_row">
    <td colspan="3"></td>
    </tr>
    
    <ul class="price-box-items">
    <li>
    
    <li>
    <div class="item-2 active">
    <h2><span>Notice</span></h2>
    <h3><span></span> <em>&nbsp</em></h3>
    <p>You have arrived on our home page. Please take the time to look around the website. As of right now, the website is not finished, so please be patient while the pages are being made. The current time frame for each webpage is about one page per day. So this is a long process, and the pages are being completed based on importance. Thanks,- JAY.</p>
    </div>
    </li>
    
    
    
    </body>
    </html>
    
    <script src="js/index.js"></script>
    
    </body>
    
    </html>
and the CSS
Code:
@import url(http://fonts.googleapis.com/css?family=Montserrat);
 
body{
background-color: #803333;
margin: 0px;
padding: 0px;
font-family: 'Segoe UI', 'Arial', sans-serif;
font-size: 13px;
}
* {
margin: 0;
padding: 0;
}
 
.blank_row
{
height: 36px;
background-color: #FFFFFF;
}
 
/*COLUMNS*/
[class^="price-box"] li {
float: center;
width: 83%;
text-align: center;
}
[class^="item-"] {
margin-left: 110px;
background-color: #fff;
}
.price-box-items h2 {
color: #fff;
font-size: 30px;
line-height: 60px;
background-color: #692525;
}
.price-box-items h3 {
font-size: 24px;
line-height: 100px;
}
.price-box-items h3 span {
font-size: 48px;
}
.price-box-items em {
color: #00aec7;
}
.price-box-items p {
color: #969696;
padding: 0 20px 40px;
}
.price-box-items [class^="item-"]:hover h2,[class^="item-"].active h2 {
background-color: #692525;
}
.price-box-2 [class^="item-"] {
background-color: #323232;
}
.price-box-2 .price-box-items h3 {
color: #fff;
}
 
 
/*NAVIGATION*/
.nav {
background: #232323;
height: 60px;
display: inline-block;
}
 
.nav li {
float: left;
list-style-type: none;
position: relative;
}
 
.nav li a {
font-size: 12.959px;
color: white;
display: block;
line-height: 60px;
padding: 0 12.6px;
text-decoration: none;
border-left: 1px solid #2e2e2e;
font-family: Montserrat, sans-serif;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.nav li a:hover:focus {
background-color: #2e2e2e;
}
 
#settings a {
padding: 17px;
height: 38px;
font-size: 10px;
line-height: 24px;
margin-top: -12px;
}
 
#search {
width: 357px;
margin: 4px;
}
#search_text{
width: 297px;
padding: 15px 0 15px 20px;
font-size: 16px;
font-family: Montserrat, sans-serif;
border: 0 none;
height: 52px;
margin-right: 0;
color: white;
outline: none;
background: #1f7f5c;
float: left;
box-sizing: border-box;
transition: all 0.15s;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: white;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: white;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: white;
}
#search_text:focus {
background: rgb(64, 151, 119);
}
#search_button {
border: 0 none;
background: #1f7f5c url(search.png) center no-repeat;
width: 60px;
float: left;
padding: 0;
text-align: center;
height: 52px;
cursor: pointer;
}
 
#options a:hover{
border-left: 0 none;
}
#options>a {
background-image: url(triangle.png);
background-position: 85% center;
background-repeat: no-repeat;
padding-right: 42px;
}
.subnav {
visibility: hidden;
position: absolute;
top: 110%;
right: 0;
width: 200px;
height: auto;
opacity: 0;
transition: all 0.1s;
background: #232323;
}
.subnav li {
float: none;
}
.subnav li a {
border-bottom: 1px solid #2e2e2e;
}
#options:hover .subnav {
visibility: visible;
top: 100%;
opacity: 1;
display:block;
}
#options:focus .subnav {
visibility: visible;
top: 100%;
opacity: 1;
display:block;
}
/*clock*/
 
 
 
 
 

ShadesOfJay
Forumember

Female Posts : 35
Reputation : 1
Language : English

http://www.virtuousrealms.board-directory.net

Back to top Go down

In progress Re: Issue with :hover on mobile

Post by Ange Tuteur on February 14th 2015, 9:47 pm

Hi @ShadesOfJay,

If you want it to expand across the whole screen, add width:100%; to the parent container. That should be .nav

For the drop downs, do you want them to only show when you click ?

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Issue with :hover on mobile

Post by ShadesOfJay on February 16th 2015, 1:29 am

@Ange Tuteur wrote:Hi @ShadesOfJay,

If you want it to expand across the whole screen, add width:100%; to the parent container. That should be .nav

For the drop downs, do you want them to only show when you click ?

No. I want them to show when you click only on mobile devices?

ShadesOfJay
Forumember

Female Posts : 35
Reputation : 1
Language : English

http://www.virtuousrealms.board-directory.net

Back to top Go down

In progress Re: Issue with :hover on mobile

Post by ShadesOfJay on February 21st 2015, 3:53 am

bump~ loul

ShadesOfJay
Forumember

Female Posts : 35
Reputation : 1
Language : English

http://www.virtuousrealms.board-directory.net

Back to top Go down

In progress Re: Issue with :hover on mobile

Post by Ange Tuteur on February 21st 2015, 4:14 am

First, let's try adding a media query to show the hover only on certain screen sizes.
Code:
@media (min-width:700px) {
  #options:hover .subnav {
  visibility: visible;
  top: 100%;
  opacity: 1;
  display:block;
  }
}

That above should only show the hover on screens with a minimum width of 700px or higher. Make sure to replace your current hover rule with the one above.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum