Develop Reference

Append <li> inside a div

I have created this nav with a div who has those li inside
<nav>
<div class="nav-links">
<li>Αρχική</li>
<li>Προϊόντα</li>
<li>Φωτογραφίες</li>
</div>
</nav>
Also, I have created a "burger" div that functions as a button, when someone is on phone, and whenever you click on it, it shows Αρχική,Προϊόντα,Φωτογραφίες.
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
However whenever someone is on phone and clicks on it I want to have one more li called "Google Maps".
Is there anyway I can do this using Javascript?

The simplest way of achieving this is via CSS - having a media query that shows the Google maps link only at mobiles screen size . The following media query will hide the li with the maps-link class for any screen size 768px and up.
You can see this in action here by viewing the snippet below (equivalent to small screen in which you will see the maps link since the width is not wide enough to match the media query.... then clicking the "full-screen" link to toggle to full screen and now the maps link will not show - because the width is wide enough totrigger the media query.
Also note that li's are children of a ul element - not a div.
And that rather than creating two seaprate nav lists - one for phone and one for not-phone... it is better to have a single list and style it accordingly for different viewports.
#media only screen and (min-width: 768px) {
.maps-link {
display: none;
}
}
<nav>
<ul class="nav-links">
<li>Αρχική</li>
<li>Προϊόντα</li>
<li>Φωτογραφίες</li>
<li class="maps-link">Google maps</li>
</ul>
</nav>

Change color of navbar using javascript

HTML
<nav>
<ul>
<li><a class="notDrop" href="#home">HOME</a></li>
<li><a class="notDrop" href="guides.html">GUIDES</a></li>
<li class="dropdown">
<a class="dropbtn">BRANDS</a>
<div class="dropdown-content">
NVIDIA
INTEL
CORSAIR
SAMSUNG
<li class="dropdown">
<a class="dropbtn">BUILDS</a>
<div class="dropdown-content">
GAMING
OFFICE
SERVER
MEDIACENTER
</div>
</li>
</ul>
</nav>
CSS
nav {
background-color: white;
overflow: hidden;
display: flex;
justify-content: center;
}
Javascript
window.onload = function mobile(){
if( isMobile.any() ) {
document.getElementById('nav').style.backgroundColor = "blue";
alert('Mobile');
}
}
But I can't get it to change color, what am I doing wrong? I managed
to change the color of the body but I cant of the nav.

You used the wrong javascript function. nav is a tag, not an id.
It should be getElementsByTagName("nav")[0] instead of getElementById("nav")
javascript will always return an array regardless of number of matching element using getElementsByTagName() method. So use [0] to return the first one.

You used document.getElementById but you have only nav tag from HTML5. Add id = "nav" to your nav tag.
Best regards!

Your problem here is that you are using getElementById, but have not given your nav an id.
The best way to solve this would be to add an id to your nav, as follows:
<nav id="top-nav">
And your js becomes:
document.getElementById('top-nav').style.backgroundColor = "blue";
The answer given by Super Cool Handsome Gel Boy, while it will work is impractical because it looks for any <nav> tag, so if you add more <nav> tags, or move them around, you will have to recode your javascript.
By using an id, the javascript will always target the right <nav>.

Styling Bootstrap tabbable nav

I'd like the functionality of the Bootstrap tabbable nav but I want to style each tab with a background image and text underneath. In fact, what I'd really like is to just put my photoshop images right in each tab and set the active state to my selected image.
I'm having a very difficult time doing this. Is it going to take a lot of custom work to get this working with this component?
I thought I could just try with some CSS but it's not giving me the correct formatting I want:
ul.nav.nav-tabs li {
display:inline-block;
background:url(../images/skypeIcon.png) no-repeat left center;
background-size:20px auto;
font-size:15px;
padding:2px 0 2px 28px
}
By the way, I'm using Bootstrap 2.3 so I can't use Bootstrap 3 Navbar Generator.

I can use a div tag inside my a tag and put whatever content I want in there.
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">
<div>
<img src="<%=context%>/images/defaultAvatar.png"/>
<br/>
Computer
</div>
</a>
</li></ul>

How to make background image position stay same on all resolutions?

I have header (100% width, 277px height), and in header I should have background image, x-repeated, which will stay in same position (x axis position), on all resolutions (1024+ actually, no need for mobile version so far). This is how it should look on all resolutions:
http://i.imgur.com/5rT4Xi9.png?1 (see profit, and cloud line under it - that's right position)
However, by changing resolution, background image changes it's position too ...
HTML:
Webopps
<h2>Helping you profit</h2>
<h3>from the Web</h3>
</div>
<div id="menu">
<ul>
<li>
Contact us
</li>
<li>
About us
</li>
<li class="has-sub">
The market
<ul class="submenu">
<li>
Mainstream
</li>
<li>
Adult
</li>
<li>
Niche
</li>
</ul>
</li>
<li>
Downloads
</li>
</ul>
</div>
</div>
CSS:
header {
width:100%;
height:277px;
z-index:999;
position:relative;
background-image:url(images/clouds2.png);
background-repeat:repeat-x;
background-position:-133px 0px;
}
http://jsfiddle.net/kF7Br/
Test link: http://bybyweb.com/webopps/
I have tried with media queries (not so smart solution, you can see at the bottom of my css, but without success), i have thought about js/jquery solutions, but have no idea how to make it... I am opened to all kind of hacks/solutions (css, jquery, html structure changes).

You can use this code :
function bgPos(){
var w = $(window).width() - $('#header-content').width();
w = w/2;
$('#header').css('background-position', w+'px 0')
}
$(window).on('resize', bgPos).trigger('resize');
But you will have to do some maths to place it well.
Fiddle : http://jsfiddle.net/kF7Br/1/

Did you try setting
background-attachment:fixed;
Also, if you dont need its position to be relative, set it to absolute.

For the desktop version, I suggest using the top and center keywords instead of using pixels. This approach looked good until about 400px wide, at that width you could use a responsive media query to override to a pixel value like you had before.
background-position:top center;

display ul as dropdown

Is it possible with pure css or really simple way to transfer nav ul menu as dropdown list when body width is smaller than given (media css) (mobile phones etc)
<nav>
<ul>
<li>Blog</li>
<li>About</li>
<li>Archives</li>
<li>Contact</li>
<li class="subscribe">Subscribe via. RSS</li>
</ul>
</nav>
Assuming: I want to display it normally, but when on mobile with narrow screen, want to display it as dropdown menu - same as select form.
[edit]
something like: http://themewich.com/aware/ -see the menu when resized.

I don't know what you want exactly but this maybe can help you .I hope
<nav>
<ul> Test
<li>Blog</li>
<li>About</li>
<li>Archives</li>
<li>Contact</li>
<li class="subscribe">Subscribe via. RSS</li>
</ul>
</nav> ​
ul li{
display:none;
}
ul:hover li{
display:block;
}​
jsFiddle

You can detect the screen width using javascript, and if the screenwidth is too small, you can change the list to a dropdown menu using tags. Google "javascript innerHTML" for more info how to do this.

If you look at the example URL with CSS disabled (or view the source), you will see that both types of navigation are present (nested list and form select). The page is using media queries to determine which element to hide: narrow devices will hide the list version while wide devices will hide the form version.