Website name in Responsive Nav Bar

goldberry Active Member

Messages:: 8

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 88

#1

Is it possible to put a Website name in the middle of the Responsive top nav how to

with the code adjusted to float the menu items to the right?

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {float: right;}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li a:hover {background-color: #111;}

ul.topnav li.icon {display: none;}

[USER=124521]@media[/USER] screen and (max-width:680px) {
  ul.topnav li:not:)first-child) {display: none;}
  ul.topnav li.icon {
  float: right;
  display: inline-block;
  }
}

[USER=124521]@media[/USER] 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>
</head>
<body>

<ul class="topnav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li class="icon">
  <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
  </li>
</ul>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<script>
function myFunction() {
  document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>

</body>
</html>

Code (markup):

goldberry, Apr 18, 2016 IP

karjen Active Member

Messages:: 54

Likes Received:: 1

Best Answers:: 1

Trophy Points:: 73

#2

Try This one

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align:center;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {
  float: right;
  padding:10px 0px;
}

ul.topnav li a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}
ul.topnav li a:hover {background-color: #111;}

ul.topnav li.icon {display: none;}
@media screen and (min-width:240px){
ul.topnav li:last-child{
  float:none;
  position:relative;
  left:0;
  right:0;
}
}
@media screen and (min-width:760px){
ul.topnav li:last-child{
  position:absolute;
}
}
[USER=124521]@media[/USER] screen and (max-width:680px) {
  ul.topnav li:not:)first-child) {display: none;}
  ul.topnav li.icon {
  float: right;
  display: inline-block;
  }
}

[USER=124521]@media[/USER] 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>
</head>
<body>

<ul class="topnav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li class="icon">
  <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
  </li>
  <li>Responsive Topnav Example</li>
</ul>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<script>
function myFunction() {
  document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>

</body>
</html>

Code (markup):

Last edited: Apr 19, 2016

karjen, Apr 19, 2016 IP

goldberry Active Member

Messages:: 8

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 88

#3

Thanks thats a big help

goldberry, Apr 19, 2016 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#4

Uhm how can you have a H2 without a h1 for it to indicate the start of a subsection of? Much less if it's your logo/heading why in blazes would it be in the list?

Your markup is such gibberish I wouldn't even try to do what you are asking without pitching that gibberish in the trash and starting over. Of course that goes double for the scripttardery just to show/hide the menu.

deathshadow, Apr 22, 2016 IP

goldberry Active Member

Messages:: 8

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 88

#5

Hey what do I know. Don't have your, at least in your mind, coding talent.

Not my work, I took this verbatim from W3Schools site and only changed the "float left to right".

Anyway big guy General wannabe I solved my problem and moved on days ago.
But why don't you show the world how good you are and post a better responsive nav bar.

You might also want to explain to the good Digitalpoint folks out there just what was the point in your reply other than to show you are the Greatest.

goldberry, Apr 22, 2016 IP

PoPSiCLe Illustrious Member

Messages:: 4,623

Likes Received:: 725

Best Answers:: 152

Trophy Points:: 470

#6

@goldberry - in this case, you might want to listen - when it comes to correct HTML/CSS, @deathshadow is probably the best, or at least one of the top three on this forum - and probably on quite a bit of others(?). He might seem arrogant and harsh, that doesn't make him wrong.
You saying you have taken something verbatim from w3schools tells all, really - junk it, start over. Nothing they provide is worth using.

PoPSiCLe, Apr 22, 2016 IP

KangBroke likes this.

goldberry Active Member

Messages:: 8

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 88

#7

Life's to short for arrogant and harsh a'holes who take delight in trying to bully and humiliate those without his ability.

Sorry you can defend him all you want but I and some that PM'd me since my reply have no respect for him. For novices like myself w3schools provides easy to understand explanations and examples.

Anyway I certainly am unlikely to seek help on this forum in future if moderators tolerate his type of needless replies.

goldberry, Apr 22, 2016 IP

PoPSiCLe Illustrious Member

Messages:: 4,623

Likes Received:: 725

Best Answers:: 152

Trophy Points:: 470

#8

If you're thin skinned, I suggest finding something else to do.
As for w3schools, I suggest you avoid using them as reference, as they provide bad advice, and are generally frowned upon by those who actually know anything.
If your way of respecting someone is if they're nice to you, then you're really in for a harsh reality check. We're here voluntarily, and we DO provide guidance and advice, but we do not have to be nice about it, especially if the person getting the advice isn't taking the advice to heart.
If you do want to learn, there are lot of good things you can learn from this forum, and understanding that your code is garbage is a first step. Don't feel bad, it usually is when you're starting out. @deathshadow pointed out some glaring issues, I could point out some more, but since you haven't provided a link, or even an image of what you want it to look like, you haven't really provided much useful information. A quick rewrite would probably be quite simple, and provide quite a bit of improvement.

PoPSiCLe, Apr 23, 2016 IP

KangBroke likes this.

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#9

I was going to let this slide, say "screw it, this guy doesn't actually want help"... but really if that post was all it took to initiate that reaction, I have to wonder if your response wasn't coloured by the sleazeball dirtbags who contacted you via PM since they clearly lack the testicular fortitude to do it in the open.

Though I can probably guess which of the hoodoo-voodoo scam artists, sleazy lazy lowlifes, and outright ignorant fools PM'd you. It's not that they don't have respect for me, it's that I keep pointing out how full of shit they are and how everything they do is either ineptly cobbled together rubbish that should be tossed in it's entirety, or that they are preying on the ignorance of nubes who don't know any better.

No respect, that's fine. The feeling is mutual -- of course that they again didn't man-up and bring it here, instead feeling the need to take it to PM just further enhances what utter and complete lowlifes such "developers" actually are... most of whom aren't qualified to flap their gums on any of the topics these forums are even about!

Of course that you seem to think of W3Schools as a legitimate learning source just means you're another nube that these slimy scum can take advantage of.

But you asked something important, and example of a "better way"... so let's do this. I was GOING to provide this anyways until your knee-jerk reaction to simple objections went over the top... let's push on as if that didn't happen and just assume that some of the known hoodoo-voodoo snake oil doctors tried to blow smoke up your ass colouring your response.

Ignoring everything outside of <body> since that's mostly stock stuff, let's focus on the semantic markup of content first. I don't know if anyone ever told you this, but if you choose your tags based on their default appearance you are likely choosing all the wrong tags for all the wrong reasons. Tags have MEANINGS and those meanings play to both professional writing norms and a concept called logical document structure.

One of the keys to logical document structure -- at least until you go and piss all over the page with HTML 5's idiotic <section> and <nav> tags -- is that headings provide the document outline. A H1 is the heading under which EVERYTHING on the page is a subsection, hence the site title and/or logo is the most likely candidate to be that h1. As the heading that ties all the pages together like fold-pairs in a book, newspaper, or professional document (term papers, legal briefs, scientific whitepapers) you should only have one H1 per page, and when possible it should be the FIRST "content-bearing" element....

From there a H2 indicates the start of a subsection of the page, so the content started with the first H2 is the main and most important content, following H2 being siblings of lesser importance. H3 indicate the start of subsections of the H2 preceding them and so forth down the line. Likewise HR, the horizontal rule, indicates the start of a subsection where a heading is unwanted and/or unwarranted. H1 through H6 do NOT mean "text in varying sizes" nor does HR mean "draw a line across the screen". If you use them for that reason, you're not using HTML properly.

Your list is pretty simple. but you have a .active class. Avoid doing that as there's a psuedo-state called "active" and it can get confusing telling :active from .active -- particularly on menus since your hover states should be trapping :active, :focus, and :hover all as the same thing so you don't leave people using non-mouse navigation out in the cold. I usually use the class "current" so as to avoid that particular woe.

Now, you really didn't provide much of anything to tell us what you are really trying to accomplish, the code presented is broken, doesn't really match what you are saying, and is semantic nonsense... but guessing WILDLY if I follow your intent and basing off what Karjen did...
<h1>
	<a href="/">
		Site Name
	</a>
</h1>

<input type="checkbox" id="mainMenuCheck">
<label for="mainMenuCheck"></label>
<ul id="mainMenu">
	<li><a href="#home" class="current">Home</a></li>
	<li><a href="#news">News</a></li>
	<li class="afterH1"><a href="#contact">Contact</a></li>
	<li><a href="#about">About</a></li>
</ul>

<div id="content">
	<h2>Responsive Main Menu Example</h2>
	<p>
		Resize the browser window to see how it works.
	</p>
</div>
Code (markup):
The h1 being the site title as the first element, the input+label being hooks for a CSS3 trick to show/hide the menu without resorting to JavaScript (the lack of CDATA in the label and lack of value/name on the input prevents the accessibility woes in MOST non-visual UA's people claim makes this method "broken" for accessibility), one class gives us a hook to "make space" for the h1 to ride down into at desktop resolution. Zero appearance is blatently declared in the document since shoving the heading inside the menu at mobile sizes would be impractical.

For the CSS we start out with our legacy desktop appearance. A LOT of people will tell you to start out with "mobile first" -- that method is GREATLY flawed as we can target modern mobile and all modern devices with media queries, so how do you "target" legacy devices that we can't target with queries?!? Shouldn't what we can't target (pre CSS3 capable browsers) be our starting point?

As such, it's legacy desktop resolution layout FIRST... well, not first since layout has no business being done until after the semantic markup for the content (or a reasonable facsimile of future content) has been written.

All of this will also assume a reset is in use.

First with the h1, we want to position:relative it so it depth sorts over the menu, then we want to set a suitable width on it to control how the anchor inside it sorts over the menu.... a negative bottom menu equal to the H1's height (which can simply be the line-height) makes the flow height zero, sliding the menu up "under" it.
h1 {
	position:relative; /* depth sorts over menu */
	width:6em;
	margin:0 auto;
	text-align:center;
	font:bold 200%/150% arial,helvetica,sans-serif;
 	margin-bottom:-1.5em;
}
Code (markup):
We also need to hide the checkbox input for the menu show/hide. Remember that clicking on a label with a for attribute is the same as clicking on the element. We can't use display:none as that breaks that behavior in IE, so a negative left absolute positioning does the job nicely:
#mainMenuCheck {
	position:absolute;
	left:-999em;
}	
Code (markup):
The menu then gets the normal formatting of inline li and inline-block anchors, but with .afterH1 getting a extra left padding on it to push the menu items off the h1 at that point. To make sure the spacing on them is even, we set a suitable width.

Oh, you'll notice all the font declarations are in % or EM, padding and width declarations are in EM. This is for "elastic layout" and "dynamic fonts" so users of non-standard font metrics don't have to go diving for the zoom. The WCAG says to do this for a reason, so freaking DO IT!
#mainMenu {
  list-style:none;
  overflow:hidden;
  text-align:center;
	font:normal 125%/120% arial,helvetica,sans-serif;
}

#mainMenu li {
	display:inline; /* avoid staircase bug */
	vertical-align:bottom;
}

#mainMenu li.afterH1 {
	padding-left:10em;
}

#mainMenu a {
  display:inline-block;
  width:5em;
  padding:0.6em 0;
  text-decoration:none;
  transition:color 0.3s, background 0.3s;
}
Code (markup):
That's it, there's your layout with the logo in the middle of the menu, WITHOUT sacrificing the accessibility or logical document structure that should be written LONG before you even THINK about layout.

Now, we need to make it responsive.

The show/hide menu I'd use the technique I outlined here:

http://www.cutcodedown.com/tutorial/mobileMenu

First thing I'd do is when the screen is too narrow (let's say 34em as the max-width?) to show the menu and h1 text, is set the H1 to lose the negative bottom margin, set it to auto-width, and align the text left with a differrnt padding.
	h1 {
		width:auto;
		margin:0;
		padding-left:0.25em;
		text-align:left;
		background:#000;
	}
Code (markup):
We then hide the menu entirely.
	#mainMenu {
		display:none;
	}
Code (markup):
Let's go for the hamburger icon. Instead of dicking around with raster images, or SVG, or some goofy webont, or any other nonsense... how about we just use generated content to make it?
	#mainMenuCheck + label {
		position:relative; /* force depth sort over h1 */
		float:right;
		margin:-2.75em 0.5em 0 0;
		padding:0.375em;
		background:#000;
		border:0.25em solid #FFF;
		border-radius:0.75em;
	}
	#mainMenuCheck + label:before,
	#mainMenuCheck + label:after {
		display:block;
		content:"";
		width:1.5em;
		height:0.25em;
		border:solid #FFF;
		border-width:0.25em 0;
	}
	#mainMenuCheck + label:after {
		border-top:0;
	}
Code (markup):
The label makes the outer border, the float puts it right, the negative margin rides it up over the h1. We then give it a background color and padding. :before and :after generated content as display:block end up one atop the other, and we set pretty much the same height and top/bottom borders on both. Since they share so much in common we just declare them together, then remove the top border on the latter one. This gives us our little burger icon as the label.

When you click on the label, the hidden input will check and uncheck, so we can use the :checked psuedo-state to show the menu.
	#mainMenuCheck:checked ~ #mainMenu {
		display:block;
	}
Code (markup):
From there it's a simple matter of cleaning up the rest of the styling and applying colouration where/as needed, as well as re-arranging the menu to better make use of the available space.

I put this all in a working demo here:
http://www.cutcodedown.com/for_others/goldberry/template.html

As with all my examples the directory:
http://www.cutcodedown.com/for_others/goldberry/

...is unlocked for easy access to the gooey bits and pieces, such as the completed CSS.
http://www.cutcodedown.com/for_others/goldberry/screen.css

Again, responsive layout is just the last in a VERY long line of steps needed to make a properly accessible device neutral design -- it's an evolutionary step in a long progression of good practices we've been told for what's rapidly closing on two decades to use. Practices like dynamic fonts, elastic layout, semi-fluid layout, semantic markup, separation of presentation from content, and progressive enhancement.

Practices I bet those jokers who contacted you via PM about having "no respect" typically scoff at, dismiss out of ignorance, or try to dupe people into thinking serve no legitimate purpose so they can continue to take advantage of people.

If I am harsh, it's out of disgust with such individuals and out of a genuine interest in helping you. You don't actually want help and instead want soothing syrup down your gullet and smoke up your backside -- listen to them instead. Just don't be surprised when your result is a steaming pile of epic fail! There's a reason most of them couldn't code their way out of a piss soaked paper bag with a hole in the bottom.

Last edited: May 1, 2016

deathshadow, May 1, 2016 IP

goldberry Active Member

Messages:: 8

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 88

#10

First I would like to thank you for the detailed information and learning experience you have taken considerable time to provide.

I am going to take some time to learn from your detailed post.

I apologize for my choice of words in previous posts, they were totally unnecessary.

The way you have responded certainly validated the support for your skills provided by POPSICLE. and you have earned my respect for the way you have now handled this.

goldberry, May 2, 2016 IP

kk5st and PoPSiCLe like this.

goldberry Active Member

Messages:: 8

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 88

#11

Have not had a lot of time, so have not been able to study closely what Deathshadow detailed in his post. I did look at his final product and it is perfect. Going to his site and looking at what he has done for other people to assist them left me very impressed and a little embarrassed by my over reaction to his initial post.

goldberry, May 3, 2016 IP

kk5st likes this.

Log in or Sign up

Advertising (learn more)

Website name in Responsive Nav Bar

goldberry Active Member

karjen Active Member

goldberry Active Member

deathshadow Acclaimed Member

goldberry Active Member

PoPSiCLe Illustrious Member

goldberry Active Member

PoPSiCLe Illustrious Member

deathshadow Acclaimed Member

goldberry Active Member

goldberry Active Member

Log in or Sign up

Advertising (learn more)

Website name in Responsive Nav Bar

goldberry Active Member

karjen Active Member

goldberry Active Member

deathshadow Acclaimed Member

goldberry Active Member

PoPSiCLe Illustrious Member

goldberry Active Member

PoPSiCLe Illustrious Member

deathshadow Acclaimed Member

goldberry Active Member

goldberry Active Member

Useful Searches