Hey Guys,
I have an issue whenever viewed on mobile device, the navigation is hidden behind my banner.
http://ofek.rldstrategic.com/
/*--- mobile landscape style ---*/
#media only screen and (max-width: 767px) {
body .container{ max-width: 420px; }
body .body-wrapper.gdlr-boxed-style { max-width: 460px; }
body .body-wrapper{ overflow: hidden; }
.one-ninth, .one-eighth, .one-seventh,.one-fifth,
.two-fifth, .three-fifth, .four-fifth,
.one, .two, .three, .four, .five, .six, .seven,
.eight, .nine, .ten, .eleven, .twelve{ width: 100%; }
<ul id="menu-home_short" class="dl-menu gdlr-main-mobile-menu dl-menuopen">
<li id="menu-item-5388" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-3733 current_page_item menu-item-5388">Home
</li>
<li id="menu-item-5389" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5389">About
</li>
<li id="menu-item-5392" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5392">Expertise
</li>
<li id="menu-item-5394" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5394">Projects
</li>
<li id="menu-item-5390" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5390">Consulting
</li>
<li id="menu-item-5393" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5393">Planning
</li>
<li id="menu-item-5396" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5396">Auditing
</li>
<li id="menu-item-5391" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5391">Contact
</li>
depending on what kind of banner you're using, I would think by adding
z-index: -10;
to your banner, you'll get the navbar on top
Related
<ul class="slick-dots" style="display: block;">
<li class=""><button>1</button></li>
<li class=""><button>2</button></li>
<li class="slick-active"><button>3</button></li>
</ul>
I want to value block to flex
But I can't find the code from my vsc.
I think those codes are inherent automatically.
How can I correct it?
<ul class="slick-dots" style={{display: "flex"}}>
<li class=""><button>1</button></li>
<li class=""><button>2</button></li>
<li class="slick-active"><button>3</button></li>
</ul>
Try this, simple and clean.
<ul className="slick-dots" style={{ display: "flex;" }}>
<li className=""><button>1</button></li>
<li className=""><button>2</button></li>
<li className="slick-active"><button>3</button></li>
</ul>
Background
I have a website with a mobile hamburger-style menu, which is not working. The menu button is displaying correctly, but nothing happens when it is clicked/touched.
Code
Backend PHP:
<!-- Mobile Links -->
<span class="lines"></span>
<a href="#" class="mobile-search-icon" title="<?php esc_attr_e('Search', 'punjaban' ); ?>">
</a>
<!-- Mobile Menu -->
<?php
register_nav_menus( array(
'mobile-primary-menu' => 'Mobile Navigation Menu',
) );
wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'mobile-primary-menu' ) ); ?>
Final HTML:
<!-- Mobile Links -->
<span class="lines"></span>
<a href="#" class="mobile-search-icon" title="Search">
</a>
<!-- Mobile Menu -->
<div class="mobile-primary-menu"><ul id="menu-primary-menu" class="menu"><li id="menu-item-21" class="search-icon menu-item menu-item-type-custom menu-item-object-custom menu-item-21"><a rel="nofollow" href="#">Search</a></li>
<li id="menu-item-407" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-407"><a rel="nofollow" href="/shop">SHOP</a></li>
<li id="menu-item-239" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-239"><a rel="nofollow" href="/recipes">RECIPES</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a rel="nofollow" href="/stockist">STOCKISTS</a></li>
<li id="menu-item-598" class="fourth-child menu-item menu-item-type-post_type menu-item-object-page menu-item-598"><a rel="nofollow" href="http://www.punjaban.co.uk/our-story/">OUR STORY</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a rel="nofollow" href="/blog">BLOG</a></li>
<li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300"><a rel="nofollow" href="http://www.punjaban.co.uk/contact/">CONTACT</a></li>
</ul></div>
Can anybody suggest what might be going wrong please?
Somebody please suggest me how can i click on menu in selenium web driver. I am trying to find out by css selector and directly by id,link text but its not work:
driver.findElement(By.cssSelector("nav > ul a#user")).click();
Help is highly appreciated. Below is the code:
<nav>
<ul style="">
<li class="">
<a id="dashboard" title="Dashboard" href="ajax/dashboard.html">
</li>
<li>
<a id="controlpanel" href="ajax/controlpanel.html">
</li>
<li class="active">
<a id="user" href="ajax/user.html">
</li>
<li class="open">
<a id="audcon" title="client" href="#">
<b class="collapse-sign">
</a>
<ul style="display: block;">
<li>
<a id="client" href="ajax/client.html">
</li>
<li>
<a id="stores" href="ajax/location.html">
</li>
<li>
<a id="sub_category" href="ajax/auditgroup.html">
</li>
<li>
<li>
</ul>
</li>
<li>
<a id="quescon" href="#">
<ul>
</li>
<li>
<li>
<a id="help" href="guidelines.html">
</li>
</ul>
</nav>
Try Following
driver.findElement(By.id("user")).click();
OR
driver.findElement(By.xpath("//li[#class='active']")).click();
I am using UI Bootstrap 14.3 and I am trying to have an image within the NavBar to dropdown a menu when clicked.
I have implemented the below code however the menu pops up at the top of the page and is not aligned under the image.
Does anybody have any suggestions to fix and improve this below solution?
<span uib-dropdown on-toggle="toggled(open)">
<a href id="simple-dropdown" uib-dropdown-toggle style="padding-top: 0px; padding-bottom: 0px;">
<img src="http://placehold.it/30x30" class="img-rounded" alt="Rounded Image" style="position: relative;top: 10px;float: left; left: -5px;height:100%;">
</a>
<ul class="uib-dropdown-menu" aria-labelledby="simple-dropdown" style="">
<li>
</span> Settings
</li>
</ul>
</span>
By removing the span and moving uib-dropdown to the li element. It aligned perfectly
<li uib-dropdown style="padding-left:0px;margin-left:0px;">
<a href id="simple-dropdown" uib-dropdown-toggle class="profile-image dropdown-toggle" style="padding-top: 10px; padding-bottom: 10px;">
<img src="http://placehold.it/30x30" class="img-rounded" alt="Rounded Image" style="heigth:30px;width:30px;margin-left:0px;padding-left:0px;">
</a>
<ul class="uib-dropdown-menu" aria-labelledby="simple-dropdown" style="">
<li>
</span> Settings
</li>
<li>
</span> Sponsored
</li>
<li>
</span> Admin Console
</li>
<li>
</span> Logout
</li>
</ul>
</li>
Pls can some help with this. View the website i'm working on on the mobile phone i observed the menu is showing without clicking the menu icon and covering my content. What can i do do solve this. Here is my code. I'm working with foundation 5
<!-- tab bar navigation -->
<nav class="tab-bar hide-for-medium-up">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Home</li>
<li>About</li>
<li>Store</li>
<li>Our Clients</li>
<li>Contact</li>
</ul>
</aside>
<a class="exit-off-canvas"></a>
Thanks
Here is your answer....
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
<div class="large-12 columns">
<nav class="top-bar" data-topbar="" role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right show-for-large-up">
<li class="active">Right Button Active</li>
<li class="has-dropdown not-click">
Right Button Dropdown
<ul class="dropdown"><li class="title back js-generated"><h5>Back</h5></li><li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="#">Right Button Dropdown</a></li>
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<ul class="right hide-for-large-up">
<li class="active">Right Button</li>
<li class="has-dropdown not-click">
Right Dropdown
<ul class="dropdown"><li class="title back js-generated"><h5>Back</h5></li><li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="#">Right Dropdown</a></li>
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left show-for-large-up">
<li>Left Button</li>
</ul>
</section></nav>
</div>