my responsive menu is in side the adsense code here is the css of menu. I have an responsive website www.idealbanker.in but while clicking menu it goes in side the adsense ads kindly guide me to resolve it.
my responsive menu is in side the adsense code here is the css of menu. I have an responsive website www.idealbanker.in but while clicking menu it goes in side the adsense ads kindly guide me to resolve it.my responsive menu is in side the adsense code here is the css of menu. I have an responsive website www.idealbanker.in but while clicking menu it goes in side the adsense ads kindly guide me to resolve it.
enter image description here
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
/* Float the list items side by side */
ul.topnav li {float: left;}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #555;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
</style>
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</script>
Solution
ul.topnav.responsive {
position:relative;
z-index: 10;
}
Add z-index property to specify the stack order.
Related
I'm trying to create a menu which will have an image in the middle of it. For example three links to the left & three to the right of the image, each menu item also has to list all child pages.
The parent level menu items have to dynamically update the text based on what has been entered in the CMS but the user doesn't have to be able to reorder or add / remove items from the menu.
What is the best way of going about doing the above? My initial thought was to hard code all the pages & use get_permalink() to get the URLs encase they change but this wouldn't take all the requirements listed above into account.
Here Is Ans that you want. for details follow link
In Below example logo is outside from ul class but then also you can set logo in between li class. so logo in middle of menu.
HTML
<div id="header">
<a class="logo" href="index.html"><img src="http://i48.tinypic.com/2mob6nb.png" alt="Michigan State" /></a>
<ul>
<li>Home</li>
<li>Stats</li>
<li>Schedule</li>
<li>Store</li>
<li>Gallery</li>
<li>Roster</li>
</ul>
</div><!--end header-->
CSS
body {
font-family: Helvetica, Arial, Century;
font-size: 12px;
margin: 0;
background: url('images/bluebg.jpg') repeat-x top center;
}
#header {
background-color: #ffd727;
height: 40px;
position: relative;
margin: 150px auto 0;
}
#header ul {
margin: 0 auto;
width: 800px;
padding: 0;
list-style: none;
}
#header ul li {
float: left;
width: 97px;
}
#header ul li:nth-of-type(4) {
margin-left: 217px;
}
#header ul li a {
text-transform: uppercase;
text-decoration: none;
display: block;
text-align: center;
padding: 12px 0 0 0;
height: 28px;
}
#header ul li a:hover {
background: rgb(235,200,35);
}
.logo {
position: absolute;
left: 50%;
margin: -48px 0 0 -108px;
}
#media screen and (max-width: 800px) {
.logo {
bottom: 100%;
}
#header ul li:nth-of-type(4) {
margin-left: 0;
}
#header ul {
width: 600px;
position: relative;
}
}
For JS - Refer below This Link
http://codepen.io/wolfcry911/pen/HyLdg
Method 2
you can also do it with left and right different menu..but method 1 is best for wp
http://foundation.zurb.com/forum/posts/1832-logo-centered-in-top-bar
Hi I am reformatting a menu bar in CSS design using Sublime text reader. This is for a homepage created from a template using Omeka. The main problem I am having is the padding on the end of the menu-bar; particularly with the "last-child". I tried to add padding to see if that would expand the background color but it won't change. The background color ends directly after the word ends. Here is the code:
#primary-nav
{
clear: none;
float: right;
width: auto;
padding: 0 20px;
}
#primary-nav a
{
display: block;
border: none;
color: #ffffff;
background-color: #13294B;
text-align: center;
height: 53px;
line-height: 53px;
padding: 0px 20px;
}
#primary-nav li
{
border: none;
}
#primary-nav li a:hover
{
background-color: #00a3e0;
color: #121111;
}
#primary-nav .navigation > li:first-child a
{
border: none;
}
#primary-nav .navigation > li:last-child a
{
border:none;
text-align: center;
padding: 0px 20px;
}
As a last note, if there is a way to condense this code that would be nice. This is the code that was generated from the template. The only part that was added was "last-child" to fix the formatting at the end of the menu bar.
Here is a link to the webpage so you can see what I am describing. http://digitalhistory.butlerlibraryservices.org/
You have this line in your style.css CSS file (Line 1931) which is causing the problem:
#primary-nav .navigation > li:last-child a {
padding-right: 0;
}
Remove it and you should fix your issue.
On responsive website, I would like to display a vertical menu on smaller screens and a horizontal menu on larger screens.
Currently, the following HTML and CSS code does NOT display a vertical menu on smaller screens. Can any one please revise/improve this code? Thanks in advance.
#menu {
width: 100%;
min-height: 40px;
position: relative;
background-color: rgb(52, 85, 154);
}
#menu a {
display: inline-block;
padding: 10px 4% 0px 4%;
font: 400 16px/32px 'Courier', sans-serif;
min-height: 40px;
color:white;
text-decoration: none;
font-weight:bold;
transition: .5s;
}
#menu a:hover {
color: red;
background-color: blue;
}
#media screen and (max-width:640px) {
#menu {
max-width: 100%;
}
}
#media screen and (max-width:775px) {
#menu a {
max-width: 100%;
padding: 0px 5px 0px 5px;
float: none;
text-align: center;
}
}
#media screen and (max-width:980px) {
#menu {
max-width: 100%;
}
}
<body>
<nav id="menu"> Home About Services Blog Links FAQ Contact
</nav>
</body>
When creating a responsive site, the main navigation is usually the trickiest because of the often requirement to display the items vertically (and within a hamburger dropdown/flyout) on a mobile screen and then horizontally on a desktop screen
The first step is to develop it using a mobile first approach. This means:
Style everything so that it looks good on a small screen
Use media queries to progressively style larger screen sizes
Here is a basic snippet of how to style a menu so that it shows vertically in a small screen and horizontally in a large screen.
/* Mobile style first */
.menu {
text-align: center;
}
.menu a {
display: block;
padding: 10px;
}
.menu a:hover {
background-color: #eee;
}
/* Desktop style after */
#media (min-width: 600px) {
.menu a {
display: inline-block;
}
}
See this jsFiddle for an example
add a display: block; declaration here:
#media screen and (max-width:775px) {
#menu a {
max-width: 100%;
padding: 0px 5px 0px 5px;
float: none;
text-align: center;
display: block;
}
}
You can try the following code snippets
HTML
just add a span tag right above the nav tag
<span id='trigger'> Menu </span>
CSS
In the initial menu a tag definition change the display to block from inline-block and set float to left.
And then put the following:
#trigger {
display: none;
}
#media screen and (max-width: 560px /* just as an example*/) {
#trigger {
display: block;
}
#menu {
display: none;
}
div.expand {
display: block;
}
#menu a {
float: none;
border-bottom: 1px solid;
}
}
Javascript
jQuery("#trigger").click(function() {
jQuery("#menu").slideToggle(500, function() {
jQuery(this).toggleClass("expand").css('display','500');
});
});
I hope this helps
I am creating a simple menu in CSS. The only "trick" is that I'd like diagonal left and right borders.
That's not really a problem though. Problem is that I need the first item of the menu to get a regular vertical border instead of a diagonal one.
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Tutorials</span></li>
<li><span>Snippets</span></li>
<li><span>Articles</span></li>
<li><span>Resources</span></li>
<li><span>Contact</span></li>
</ul>
</nav>
and the CSS:
nav ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
nav li {
display: inline-block;
margin: 0 5px;
transition: all 0.3s;
}
nav a {
display: block;
color: #285064;
transition: all 0.3s;
}
nav a:hover {
color: #12242d;
}
nav span {
display: block;
}
#media all and (min-width: 690px) {
nav li {
margin: 0;
transform: skewX(-10deg);
}
nav a {
padding: 10px 20px;
color: #fff;
background-color: #285064;
}
nav a:hover {
color: #fff;
background-color: #12242d;
}
nav span {
transform: skewX(10deg);
}
}
Here is a JsFiddle of the current menu:
http://jsfiddle.net/mfL8509t/
Basically on that example, I'd need the "home" container to get a vertical regular border on the left hand side only.
How could I do that?
Thanks a lot!
Very easy, use first-child of
nav li:first-child {
transform: inherit;
}
I'm brand new to this coding stuff so please go easy on me ;)
I'm trying to make the top nav on this website stretch to fit the width of what I understand to be the "container" of the website which is 900px wide. I can't for the life of me remove what appears to be padding or margins to the left and right of the nav. See code below.
Site screenshot here: http://img560.imageshack.us/img560/9479/237c.png
Right now I'm just cleverly making adjustments to padding to make the nav somewhat centered on the page, but ultimately it would look much better if it met up with the edge of the containter like everything else.
Thx for any help.
/* Navigation
--------------------------------------------------------------------------------*/
#topnav {
clear: both;
margin: 0 0;
overflow: hidden;
}
#topnav ul {
list-style: none;
float: left;
text-align: center;
}
#topnav ul li {
list-style: none;
float: left;
background: url(nav-sep.png) right 0px no-repeat;
padding: 15px 0px 12px 0px;
display: inline block;
}
#topnav ul > li:last-child,
#topnav ul > span:last-child li {
background: none;
padding-right: 0;
}
#topnav a {
float: left;
display: block;
color: #545454;
font-family: Blair, sans-serif;
font-weight: 500;
padding: 6px 0 6px;
border: 0;
border-top: 3px solid transparent;
outline: 0;
margin: 0 16.6px;
list-style-type: none;
font-size: .75em;
text-transform: uppercase;
}
#topnav ul > li:last-child a,
#topnav ul > span:last-child li a {
margin-right: 0;
}
#topnav li#active a,
#topnav a:hover {
color: #666666;
border: 0;
border-top: 3px solid #8cc640;
}
Try with
margin-left:auto;
margin-right:auto;
See also:
Cross browser method to fit a child div to its parent's width
Hope this helped. Cheers.
I would say to add a main container div that will enclose all your existing html, and then define a css for it with margin-left/right as auto :
<head>
.......
<style>
#mainContainer {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<html>
<body>
<div id="mainContainer">
............................
............................
............................
</div>
</body>
</html>
Hi if you are new on this you need to know that for default all element tags like ul, p or body has for default some values on properties like margin and padding. What you need is first work on reset those values in CSS to avoid issues and make more easier your cutomization. In your case the ul has some properties:
ul {
display: block;
list-style-type: disc;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
padding-start: 40px;
}
You can use this simple global reset with * as the global selector :
* {
margin:0;
padding:0;
}
Or search for some complex resets like this one.
Then with values on 0 you can customize in a better way your elements:
#topnav ul {
list-style: none;
float: left;
text-align: center;
width:100%;
}