I am having the following problem, shown in pictures:
In Chrome:
note that this cutting submenu, since Firefox is as follows:
Do not understand what may be happening
a snippet of code
<li class="menu-item-link menu-item-depth-3 menuitemslinefirst menu-item-parent" style="background-color: transparent;">
<a class="arrow" href="#">
<span>></span>
</a>
<a href="">
<span>
<img width="5" height="5" style="margin-top:8px; margin-left:10px" src="http://tecorp.com.br/skin/frontend/default/default/images/menu/icone/all.png" alt=""> Teclados
</span>
</a>
<ul class="menu-container" style="display: block;">
<li class="menu-item-text menu-item-depth-4 ">
<ul class="em-catalog-navigation ">
<li class="level0 nav-1 first">
<a href="http://tecorp.com.br/index.php/teclados/teclados-com-fio.html">
<span>Teclados com Fio</span>
</a>
</li>
<li class="level0 nav-2 last">
<a href="http://tecorp.com.br/index.php/teclados/teclados-sem-fio.html">
<span>Teclados sem Fio</span>
</a>
</li>
</ul>
</li>
an image of the css that is affecting this element if you need put the file
------------------------------------- EDIT ----------------------------------
Scouring the internet, by any chance can get where the error, if I take this part .show("slow"); and just put .show(); it work if I use "slow" it does not work in chrome
$("# em_nav").show();
$("# em_nav").show("slow");
Related
Thanks for solving this issue,
this might be a duplicate but I am new to this and am wondering how I can stop this horizontal scroll on my site, here is a link to it as a codepen codepen and here is it on github github
as i have mentioned I am struggling to get the horizontal scroll to stop and I would rather it wraps onto a new line rather than having it scroll onto a white space
here is an example of the issueexample of the issue
thanks
navbar code as this is causing issue
<nav class="navbar">
<div class="logo">
<a href=index.html>
<img src="Addy Schroeders.png" width="60px" height="60px">
</a>
</div>
<div class="menu">
<li>
<a href="/">
Home
</a>
</li>
<li>
<a href="/">
About
</a>
</li>
<li>
<a href="/">
help and resources
</a>
</li>
<li class="services">
<a href="/">
pages
</a>
<!-- DROPDOWN MENU -->
<ul class="dropdown">
<li>
<a href="template.html">
Dropdown 1
</a>
</li>
<li>
<a href="/">
Dropdown 2
</a>
</li>
<li>
<a href="/">
Dropdown 2
</a>
</li>
<li>
<a href="/">
Dropdown 3
</a>
</li>
<li>
<a href="/">
Dropdown 4
</a>
</li>
</ul>
<li>
<a href="/">
Contact
</a>
</li>
</div>
</ul>
To wrap the content, you can use display: flex and flex-wrap: wrap. This should make it wrap to a new line and fix your issue!
The flex-wrap CSS property can help you set whether flex items are either one line, or if they can wrap in multiple lines.
I am having a issue with getting my bootstrap to work with a site I am designing for a friend.
<nav class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/" style="width: 240px;">
West Coast Refuse Trucks
</a>
<div class="nav-collapse">
<ul class="nav">
<li>
<a href="index.html" class="active">
Home
</a>
</li>
<li>
<li>
<a href="about.html">
About
</a>
</li>
<li>
<a href="firstgear.html">
First Gear
</a>
</li>
<li>
<a href="/play">
Uploads
</a>
</li>
<li>
<a href="/forums">
Refuse Community
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
I am not sure what is preventing it from highlighting in my page on my site. Home shows up as usual. Any help?
Assuming that you are using Bootstrap 2.3.2, you suppose to add active class to <li>, not to <a>.
<ul class="nav">
<li class="active">
Home
</li>
<!-- ... -->
</ul>
Demo: http://bootply.com/97634
I'm making a portfolio page here (http://198.96.94.51/v2/) and while clicking on the navigationMenu links on the side really fast, they don't seem to redirect to the proper anchor (some of them don't move the page at all). I've initialized my anchor tags like this
<ol class="curtains">
<li id="home" class="cover">
<a id="home"></a>
<header data-fade="550" data-slow-scroll="3">
<h1>John Smith</h1>
<h2>HOBBY/JOB TITLE</h2>
</header>
</li>
</ol>
My navbar code -
<ul id="navigationMenu">
<li>
<a class="home" href="#home">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="#about">
<span>About</span>
</a>
</li>
<li>
<a class="projects" href="#projects">
<span>Projects</span>
</a>
</li>
<li>
<a class="resume" href="#resume">
<span>Resume</span>
</a>
</li>
<li>
<a class="contact" href="#contact">
<span>Contact us</span>
</a>
</li>
</ul>
But just clicking on the navbar, or even typing #home into the address bar won't bring the browser back to the top sometimes. Is there anything I'm doing wrong?
Ids identify anchor points so they must be unique.
But if you just want to go to the top of the page you should try a simple # as value for your href attribute.
A link to the id of e.g. a <div> tag would lead you to this <div> tag.
<div id="anchor"></div>
this fiddle shows you: http://jsfiddle.net/aYGFR/1/
You can give like this: <a id="home" href="home.php">Home</a>
Im using mootoolsv1.3.2. Using mootools how to remove the Ul from the below code.
My present code:
<ul class="clean menu" id="topics">
<li class="drop png">
<a cat="ntech" class="sec_accnt" href="javascript:void(0);" name="&lid=choose_category_billing" rel="1" style="BACKGROUND-POSITION: 13px -164px">Billing</a>
</li>
<li class="drop png">
<div class="add">
<span href="#" id="tv" style="BACKGROUND-POSITION: 13px 9px">TV</span>
</div>
<ul class="clean menu sub">
<li>
<a cat="tech" class="sec_tv" href="javascript:void(0);" name="&lid=choose_category_tv_fios" rel="1">FiOS TV</a>
</li>
<li class="last" style="margin-bottom:6px;">
<a cat="tech" class="sec_tv_1" href="javascript:void(0);" name="&lid=choose_category_tv_direct" rel="1">DIRECTV</a>
</li>
</ul>
</li>
</ul>
Should look like this:
<ul class="clean menu" id="topics">
<li class="drop png">
<a cat="ntech" class="sec_accnt" href="javascript:void(0);" name="&lid=choose_category_billing" rel="1" style="BACKGROUND-POSITION: 13px -164px">Billing</a>
</li>
<li class="drop png">
<a cat="ntech" class="sec_tv_fios" href="javascript:void(0);" name="&lid=choose_category_tv" rel="1" style="BACKGROUND-POSITION: 13px -164px">TV</a>
</li>
</ul>
The change should be based on the value of a flag variable.
If flag=0{
code remains same
}else{
code changes as mentioned.
}
Someone please help with the solution.
Safe way which makes sure the sub menu is a child of 'topics'
$('topics').getElements('ul.sub').destroy();
destroy() will make sure that the DOM elements will be GC:ed
My navigation bar isn't displaying the dividers for every subpage element. This is only happening in google chrome,not IE or FF. Here is an image (click here for larger size of image):
Here is my HTML code:
<li class="dropdown">
<a href="/jrknet/www/company" class="dropdown-toggle" data-toggle="dropdown" data-target="#">
Company
<b class="caret">
</b>
</a>
<ul class="dropdown-menu">
<li>
<a href="/jrknet/www/company/about-us">
About us
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/meet-the-team">
Meet the Team
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/mission-statement">
Mission Statement
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/development-methodology">
Development Methodology
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/quality-management">
Quality Management
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/business-continuity">
Business Continuity
</a>
</li>
</ul>
You can check zoom-in and zoom-out when such issues arise..
i don't find any problem with the code..
Moreover, if the problem remains, you can try changing your display resolution..