Question on header/menu


(Blu McCormick) #1

Hello. I have a question on my header/menu.

Here is my header/menu:

I’d like to stretch the white in the after header where the menu is to fit the edges of the page and move the grey shadowed line from below the header to below the after header so that the header and after header appear as one white space with a grey shadowed line below it. Does anyone have any suggestions? Here is my code:

CSS:

nav ul { 
    text-align: center;
}

nav ul li { 
    display: inline-block;
}

a:hover {
    transition: color 150ms ease-out 0s;
    color: rgb(44, 174, 195);
}

a {
    transition: color 150ms ease-out 0s;
    color: rgb(35, 137, 153);
}

nav#bar {
    width: 100%;
    height: 48px;
    background: #ffffff;
    top: 20;
    z-index: 1;
}

nav#bar a.nav-link {
    color: rgb(72, 72, 72);
    text-decoration: none;
    text-align: center;
    font-family: 'Arimo', arimo;
    font-weight:bold;
    line-height: 48px;
    min-width: 90px;
    font-size: 16px;
    float: left;
}

nav#bar a.red.selected {
  color: #c30000;
  border-color: #c30000 !important; }

nav#bar a.red:hover {
  color: #c30000;
}

nav#bar a.orange.selected {
  color: #c30000;
  border-color: #c30000 !important; }

nav#bar a.orange:hover {
  color: #c30000;
}

nav#bar a.yellow.selected {
  color: #c30000;
  border-color: #c30000 !important; }

nav#bar a.yellow:hover {
  color: #c30000;
}

nav#bar a.green.selected {
  color: #c30000;
  border-color: #c30000 !important; }

nav#bar a.green:hover {
  color: #c30000;
}

nav#bar a.blue.selected {
  color: #c30000;
  border-color: #c30000 !important; }

nav#bar a.blue:hover {
  color: #c30000;
}

nav#bar a.grey.selected {
  color: #c30000;
  border-color: #c30000 !important; }

nav#bar a.grey:hover {
  color: #c30000;
}

nav#bar a.nav-link.selected {
  line-height: 42px;
  border-top: 3px solid #ffffff;
  background-color: #ffffff;
  height: 45px;
}
.category-description {
    color: #484848;
}
.topic-list .topic-excerpt {
    color: #484848;
}
p>code, li>code, pre>code {
    color: #484848;
}
@import url(http://fonts.googleapis.com/css?family=Arimo);

body {
    font-family: "Arimo";
    font-size: 16px;
}
#main-outlet {
    padding-top: 63px;
}

After header:

Thanks, in advance.


Custom nav header like discourse.org
How to stop the header and after header splitting when scrolling iPhone in portrait view?
(Joe) #2

The main issue is that parent divs have lower widths than the full viewport so width: 100% for the nav can only as big as it’s parent div and never the full screen.

Although this is a bit on the hacky side and is no substitute for a bit of html tidying

do you mean sort of like this?

You can get this effect by creating a :before sudo element that stretches to the full width of the screen behind the nav#bar element and then it’s just a matter of giving it a white background and the grey line in the form of a box-shadow underneath.

Once that’s done, all you need to is remove the box-shadow from the native Discourse header.

nav#bar:before {
    content: "";
    position: absolute;
    width: 200vw;
    height: 100%;
    top: 0;
    left: -100vw;
    z-index: -1;
    background: white;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
}

nav#bar {
    position: relative;
    margin-bottom: 1em;
}

.d-header {
    box-shadow: none;
}

The only thing that remains is how you want the navigation bar to behave on small screens.


Add horizontal menu to after header
(Blu McCormick) #3

Yes, that’s exactly what I want, III ! Thank you so much. :grinning:

As you anticipated, it works great on the desktop but on the phone it breaks down, in that the font size of the menu is too large so that when the phone is held vertically some of the words of the menu dip below the after header and the after header (with the menu on it) separates from the header and moves up under the header as you scroll down.

I’d love it if the header for the phone would act the same as the desktop in that the header and after header behave as one white unit. I imagine the white header (including the after header) would stay at the top even when scrolling and the words of the menu resize (to some degree) to fit the phone screen. Or perhaps the font is resized just for the mobile.

What would it take to do that? Do you know? I imagine I would need to add code under “Mobile” for a start.

P.S. If this code gets sorted and works, I’ll post the complete code below so others can use it, along with how it looks.


(Joe) #4

You’re most welcome @McBlu :grin: glad that it matches what you want.

So, this might take a bit of back and fourth to make sure this behaves how you want it, but there’s no harm in trying.

Kindly remove the code from the post above and add this instead. Add it to common CSS and not the mobile section.

#main-outlet {
    padding-top: 55px;
}

nav#bar {
    position:relative;
    height: 100%;
    margin-bottom: 1em;
}

nav#bar:before {
    content: "";
    position: absolute;
    width: 200vw;
    height: 100%;
    top: 0;
    left: -100vw;
    z-index: -1;
    background: white;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
}

.d-header {
    box-shadow: none;
}

nav#bar ul {
    margin: 0;
}

Then try again, the menu should wrap on smaller screens and the header should grow to accommodate the increase in height and push everything else lower.

Let me know once you added it.


(Blu McCormick) #5

It’s beautiful.

The menu on the after header still disappears when you scroll through the page. The more I look at that, the more I think that’s fine since screen space is precious for viewing topics and members will know to scroll to the top to access that menu to explore other areas of the main website.

I have to hold the phone landscape to get the menu to be on one line in the mobile view on my phone. In portrait position, the menu doesn’t fit on one line but takes up two lines. I wonder if that is typical given the small screen space we have to work with? What do you think? I don’t really know what discourse is capable of doing in terms of mobile view of the forum and keeping the menu on one line in portrait view.


(Joe) #6

You’re right, I generally try to keep as much space as possible available for content, which is what users come for. However, if you’d like, we can also try to keep it fixed in place when scrolling. It’s your call. Here’s what that would look like.

Click on images to see full height

When the menu items are wrapped, the header will take about 20% of the screen height.

Correct, with the current font size and display settings, you would need a screen at least 539px wide to see the entire menu on one line.

Yes, small screens are a hassle. The fact that they come in all different sizes makes life more complicated.

In most other cases, I would be inclined to create a different hamburger style menu with a button for mobiles like so:

This sets the header to about 13% of the view-port height.

The problem with doing this in Discourse is that Discourse has a neatly packed header already. Not to mention a dedicated menu button. This creates confusion because your header would have two menus.

So that cannot be the answer. But it does bring focus to the Discourse Menu.

You can opt to add the menu items to the native Discourse menu using this plugin:

If you do that, we can keep the navigation menu visible in the header and remove it in mobiles to be like this:

Desktop view :

And mobile view:

Let me know how you’d like to proceed :grin:


(Blu McCormick) #7

Thank you so much! Wow. This is awesome. Discourse is awesome. I really like the solution where I use the Navigation – Add custom menu items plugin. I am going to try that and hold off on marking this topic as solved till I’m done if that’s ok with you. I’ll add the final code and plugin solution below with images and credits to the help I received and the warning that I am NOT a programmer. Figure that’s ok since they can follow the story in here.
Addendum: I am trying discoursehosting.com and waiting to see how installing plugins works through them.


(Blu McCormick) #8

I am trying a new fix where instead of the horizontal menu in the mobile version, I am adding the links to the drop down hamburger menu which is achieved with this code:

08 AM

Per this helpful link here:

The last drop-down menu section for purpose of adding links via code is footerLinks
and the third section from the top is generalLinks. What is the top FAQ section called? I’d like to add my website page links there in caps.

Thanks so much.


(Joe) #9

That’s a great find @McBlu :crossed_fingers:

Take this with a grain of salt

The top part of the menu is called adminLinks. You can find it in this template (highlighted)

I went ahead and tried to add the a menu item to that part but it did not work.

I used:

<script type="text/discourse-plugin" version="0.8.13">
  api.decorateWidget('hamburger-menu:adminLinks', () => {
    return { href: 'https://eviltrout.com', rawLabel: 'evil trout' };
  })
</script>

However, I would like to point out that the top part only shows to site staff. So in theory you can add your links to the generalLinks section and they would show on top for non-staff members.

For example if I use:

<script type="text/discourse-plugin" version="0.8.13">
  api.decorateWidget('hamburger-menu:generalLinks', () => {
    return { href: 'https://eviltrout.com', rawLabel: 'evil trout' };
  })
</script>

and I log-in to the site as a member of staff I see:

but as a non-staff member or logged out user I see:


(Blu McCormick) #10

That is very key to know @lll – that the top section of the drop-down hamburger menu only shows to admin. No point in adding the website links there, lol. Right?

I was told by DiscourseHosting that the ‘Navigation – Add custom menu items’ plugin has been found by some to have technical issues and that everything in the app can be done with site customizations as well. They pointed out the link in support for adding code to adjust the drop-down hamburger menu.

When I posted the question above about adding links to the FAQ section I was thinking I’d like my menu links to be in their own section at the top of the drop-down menu, formatted differently, whether it be in caps or a different color. Navigating the mother-website is of top priority for my platform. I thought adding my links to the FAQ section would be great until I learned from you that only admin would see it. Thanks for the heads up.

Funnily enough, I am interested in the code for changing the horizontal menu into a toggle button when in portrait mobile view. Only because I already have the mother-site set up for the mother-site weblinks to be in the horizontal menu and items exclusive to the forum (using the discourse widgets wordpress plugin) to be in the drop-down hamburger menu anyway. So users would be used to going to the horizontal menu for navigating the overall website and the hamburger drop-down menu for information about the forum. That might actually be a great solution. Is there a link in support with code posted for that , that I could play with?

Thanks so much.


(Joe) #11

Apologies for the delayed reply @McBlu

This is by far no where near a final version, but try and let me know if we’re header in the right direction.

Desktop (ignore the coloring for now)

Mobile menu closed:
click image for full size

and mobile menu open:

To get this going:

Here’s what it looks like live:

click for full size

Remove all previous code we tried before and try:

Common CSS:

@media (min-width: 900px) {
	.menu {
		font-size: 1em;
	}
}
.menu {
	padding: 0.5em;
	min-height: 2em;
}
.menu > ul {
	transition: max-height 0.25s linear;
}
.menu ul {
	padding: 0;
	text-align: center;
}
.menu li {
	transition: visibility 0.25s linear;
	display: inline-block;
	padding: 0.5em 1em;
	position: relative;
}
@media (max-width: 650px) {
	.menu > ul {
		max-height: 0;
		overflow: hidden;
		margin: 0 auto;
	}
	.menu li {
		visibility: hidden;
		display: block;
		padding: 0.5em 0;
	}
	.menu .navbar-handle {
		display: block;
	}
	#navbar-checkbox:checked + .menu ul {
		max-height: 300px;
	}
	#navbar-checkbox:checked + .menu li {
		visibility: visible;
	}
}

.menu ul,
.menu li,
nav#bar ul,
.menu {
	margin: 0;
}

nav#bar,
nav#bar:before {
	background: white;
}

.navbar-checkbox,
.navbar-handle {
	display: none;
}

.navbar-handle {
	cursor: pointer;
	position: relative;
	font-size: 45px;
	padding: 0.5em 0;
	text-align: center;
}

.menu .navbar-handle {
	font-size: 1em;
	margin: 0.25em auto;
	padding: 0;
}

#main-outlet {
	padding-top: 120px;
}

nav#bar {
	position: fixed;
	margin-bottom: 1em;
	transform: translate(-50%, 0);
	left: 50%;
	z-index: 999;
	top: 55px;
	width: 100%;
	padding-top: 0;
}

nav#bar:before {
	content: "";
	position: absolute;
	width: 250vw;
	height: 100%;
	top: 0;
	left: -125vw;
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25);
}

.d-header {
	box-shadow: none;
}

And common after header:

<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">
<nav class="menu" id="bar">
    <ul>
        <li><a class="nav-link grey" href="http://wethepeoplejournal.com/" target="_blank">HOME</a></li>
        <li><a class="nav-link orange" href="http://wethepeoplejournal.com/blog-archive/" target="_blank">BLOGS</a></li>
        <li><a class="nav-link orange" href="https://forums.wethepeoplejournal.com/" target="_blank">FORUM</a></li>
        <li><a class="nav-link green" href="http://wethepeoplejournal.com/lafayette-colorado-advocacy-group/" target="_blank">GROUPS</a></li>
        <li><a class="nav-link yellow" href="http://wethepeoplejournal.com/how-you-can-contribute/" target="_blank">HOW TO CONTRIBUTE</a></li>
    </ul>
  <label for="navbar-checkbox" class="navbar-handle">Menu</label>
</nav>

Once you add the code, I’d be happy to help with code clean up and any styling issues / bugs.

:wine_glass:

Most of this is based on Sébastien Lavoie’s work here:


(Blu McCormick) #12

G’day!

I implemented the code and now the drop-down menu on the desktop view cuts off the top of the menu so I can’t go into admin (as far as I can see) to play with the code to fix that. Any suggestions? Perhaps I can get into the code through my iphone. :slight_smile: I’ll keep playing with it.

I also deleted code I had that made the horizontal menu for the desktop view which I will reinstall. Perhaps that had something to do with it.


(Joe) #13

Since you’re already logged in on your device, you can go to the admin page directly by using the url:

https://forums.wethepeoplejournal.com/admin

I am not sure why it’s happening, I get this result when I only add the code that I mentioned in my previous post:

However, the issue seems to be caused by z-index stacking order. The new menu is on top of the admin menu.

Edit:

I edited the code in my previous post, once you get into the admin remove the previous code and add it again from the post.

It should work now :sweat_smile:

Also, the code in the after header section is not correct on your site, you may want to completely remove that and add it again because there are duplicate elements:


(Blu McCormick) #14

Thanks, III. :slight_smile: You are the best! I love the new format for the phone menu. It’s fantastic.

I made a few small changes to your awesome code:

A. I changed the font size by changing the following to 1.25em

font size
05 PM
B. I added the following code so that the link in the menu turns red when the mouse hovers over the link and the links in the phone menu are green (to differentiate them from “MENU”)

35 PM

C. I made the phone “MENU” title capitalized

capitalized

(d) I got rid of the class code in the after header as it was redundant

Please feel free to correct/improve the code by any means (thanks).

HERE IS THE CODE IN IT’S ENTIRETY IN CASE THAT IS HELPFUL:

COMMON CSS:

@media (min-width: 900px) {
	.menu {
		font-size: 1.25em;
	}
}
.menu {
	padding: 0.5em;
	min-height: 2em;
}
.menu > ul {
	transition: max-height 0.25s linear;
}
.menu ul {
	padding: 0;
	text-align: center;
}
.menu li {
	transition: visibility 0.25s linear;
	display: inline-block;
	padding: 0.5em 1em;
	position: relative;
}
a:hover {
    transition: color 150ms ease-out 0s;
    color: rgb(195, 0, 0);
}
a {
    transition: color 150ms ease-out 0s;
    color: rgb(35, 137, 153);
}
@media (max-width: 650px) {
	.menu > ul {
		max-height: 0;
		overflow: hidden;
		margin: 0 auto;
	}
	.menu li {
		visibility: hidden;
		display: block;
		padding: 0.5em 0;
	}
	.menu .navbar-handle {
		display: block;
	}
	#navbar-checkbox:checked + .menu ul {
		max-height: 300px;
	}
	#navbar-checkbox:checked + .menu li {
		visibility: visible;
	}
}

.menu ul,
.menu li,
nav#bar ul,
.menu {
	margin: 0;
}

nav#bar,
nav#bar:before {
	background: white;
}

.navbar-checkbox,
.navbar-handle {
	display: none;
}

.navbar-handle {
	cursor: pointer;
	position: relative;
	font-size: 45px;
	padding: 0.5em 0;
	text-align: center;
}

.menu .navbar-handle {
	font-size: 1em;
	text-transform: uppercase;
	margin: 0.25em auto;
	padding: 0;
}
#main-outlet {
	padding-top: 120px;
}

nav#bar {
	position: fixed;
	margin-bottom: 1em;
	transform: translate(-50%, 0);
	left: 50%;
	z-index: 999;
	top: 55px;
	width: 100%;
	padding-top: 0;
}

nav#bar:before {
	content: "";
	position: absolute;
	width: 250vw;
	height: 100%;
	top: 0;
	left: -125vw;
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25);
}

.d-header {
	box-shadow: none;
}

COMMON AFTER HEADER

I am wondering:

A. Is there any way to make it appear as if the after header is attached-to/follows the header, such that when you scroll down to the bottom of the page, when the header is pulled down, the after header is pulled down too as if they are one unit? I have been scratching my head about how to describe this so it makes sense. If you scroll to the bottom of your mobile device, you will see the header and after header splitting apart.

B. The links on the desktop menu work but not the mobile menu and I can’t figure out why. If it is something I did, my apologies.

C. How would I code the css so that the forum page is highlighted in red whenever the user is on the forum page? Would doing so conflict with the code I added to have a link turn red when the cursor hovers over a link? P.S. I have it set up so that when you click on a link, that link opens up in a new page as if the user is going to another page of the website and the forum is one page of that website. So when the user goes back to the forum page by clicking on that page tab, it would need to be red (I guess . . .if that is even possible.) I am very new to websites so I don’t really have an idea of the best approach.


It’s looking pretty nice, FYI:
DESKTOP:

MOBILE LANDSCAPE:

MOBILE PORTRAIT:


(Joe) #15

:grin: you’re welcome

Yes, I think a bigger font on bigger screens is a great idea.


This is also a great addition.

I would recommend you make the selector a little bit more specific

If you use this:

a {
    color: #238999;
}

a:hover {
    color: #c30000;
}

You are in essence changing all anchor (AKA link) elements. With the code above every link will turn green (unless there is a more specific rule applied to it) and will turn red when hovered.

To avoid this, narrow down your rule.

All the links you want to change are under the <nav> element with the id="bar" So use that to narrow down the rule to this:

#bar a {
   color: #238999;
}

#bar a:hover {
   color: #c30000;
}

That way the styles are only applied to links that are inside the menu you added and not to everything.

Also, you used the transition property twice. ( I’m a big fan of smooth transitions :+1:)

Note: I don’t know if the delay you added in the transition is intentional or not so, I’ll leave it alone.

a {
    transition: color 150ms ease-out 0s;
}

a:hover {
    transition: color 150ms ease-out 0s;
}

Using it only on the <a> element without hover is enough.

So the final version of this would look like this:

#bar a {
    color: #238999;
    transition: color 150ms ease-out 0s;
}

#bar a:hover {
    color: #c30000;
}

If you want to get a little bit fancy you also need to cover the other states for the <a> element like :focus and :visited and :active The code would then be something like this:

#bar a {
	transition: color 150ms ease-out 0s;
}

#bar a,
#bar a:visited {
	color: #238999;
}

#bar a:hover,
#bar a:focus,
#bar a:active {
	color: #c30000;
}

This would prevent some defaults where links change color if you have already visited them before


Moving on:

Great as elements with duplicate id's are a no no.


I really hate to say this but I don’t quite understand :sweat_smile:.
On my phone the menu behaves like this:

Does it look different on your phone?


I tried the links on my phone and they seem to be working fine. I don’t know what else might be causing the issue. Got another phone handy to try?


To answer the second part of the question first, no. You can add other properties and they would act independently.

Now, to answer the first part of the question.

Well “forum” in you case is Discourse. When the user is on the forum, they are by definition on Discourse. The code you added only affects elements within Discourse and has no effect on your main site.

Therefore, it’s safe to say that you can change the default color for the “forum” link to red, because when this menu is displayed, the user is on Discourse and by definition in the “forum” section of your site.

To do this we can add a class to the “forum” menu item and then target that.

So the links in the after header (common) section ends up looking like this:

        <li><a href="http://wethepeoplejournal.com/" target="_blank">HOME</a></li>
        <li><a href="http://wethepeoplejournal.com/blog-archive/" target="_blank">BLOGS</a></li>
        <li><a class="forum-link" href="https://forums.wethepeoplejournal.com/" target="_blank">FORUM</a></li>
        <li><a href="http://wethepeoplejournal.com/lafayette-colorado-advocacy-group/" target="_blank">GROUPS</a></li>
        <li><a href="http://wethepeoplejournal.com/how-you-can-contribute/" target="_blank">HOW TO CONTRIBUTE</a></li>

And then we would use this CSS to make the forum link red:

.forum-link {
	color: #c30000;
}

You can further reduce the code by adding the selector to the other selectors you used earlier to turn the links red when you hover them.


So, with all of that said, here’s what your common after header should look like:

<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">
<nav class="menu" id="bar">
    <ul>
        <li><a href="http://wethepeoplejournal.com/" target="_blank">HOME</a></li>
        <li><a href="http://wethepeoplejournal.com/blog-archive/" target="_blank">BLOGS</a></li>
        <li><a class="forum-link" href="https://forums.wethepeoplejournal.com/" target="_blank">FORUM</a></li>
        <li><a href="http://wethepeoplejournal.com/lafayette-colorado-advocacy-group/" target="_blank">GROUPS</a></li>
        <li><a href="http://wethepeoplejournal.com/how-you-can-contribute/" target="_blank">HOW TO CONTRIBUTE</a></li>
    </ul>
  <label for="navbar-checkbox" class="navbar-handle">Menu</label>
</nav>

And the common CSS (includes all of your changes and my changes above already)

@media (min-width: 900px) {
	.menu {
		font-size: 1.25em;
	}
}
.menu {
	padding: 0.5em;
	min-height: 2em;
}
.menu > ul {
	transition: max-height 0.25s linear;
}
.menu ul {
	padding: 0;
	text-align: center;
}
.menu li {
	transition: visibility 0.25s linear;
	display: inline-block;
	padding: 0.5em 1em;
	position: relative;
}
#bar a {
	transition: color 150ms ease-out 0s;
}

#bar a,
#bar a:visited {
	color: #238999;
}

#bar a:hover,
#bar a:focus,
#bar a:active,
#bar a.forum-link {
	color: #c30000;
}
@media (max-width: 650px) {
	.menu > ul {
		max-height: 0;
		overflow: hidden;
		margin: 0 auto;
	}
	.menu li {
		visibility: hidden;
		display: block;
		padding: 0.5em 0;
	}
	.menu .navbar-handle {
		display: block;
	}
	#navbar-checkbox:checked + .menu ul {
		max-height: 300px;
	}
	#navbar-checkbox:checked + .menu li {
		visibility: visible;
	}
}

.menu ul,
.menu li,
nav#bar ul,
.menu {
	margin: 0;
}

nav#bar,
nav#bar:before {
	background: white;
}

.navbar-checkbox,
.navbar-handle {
	display: none;
}

.navbar-handle {
	cursor: pointer;
	position: relative;
	font-size: 45px;
	padding: 0.5em 0;
	text-align: center;
}

.menu .navbar-handle {
	font-size: 1em;
	text-transform: uppercase;
	margin: 0.25em auto;
	padding: 0;
}

#main-outlet {
	padding-top: 120px;
}

nav#bar {
	position: fixed;
	margin-bottom: 1em;
	transform: translate(-50%, 0);
	left: 50%;
	z-index: 999;
	top: 55px;
	width: 100%;
	padding-top: 0;
}

nav#bar:before {
	content: “”;
	position: absolute;
	width: 250vw;
	height: 100%;
	top: 0;
	left: -125vw;
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25);
}

.d-header {
	box-shadow: none;
}

Let me know if you need anything :ok_hand:


(Blu McCormick) #16

Thanks, III. Here is a captured screen video of the forum on my iPhone in portrait view. It shows what I am talking about in regards to the header and after-header splitting.

Here is a captured screen video of the forum on my iPhone in landscape view showing the header and after header splitting.

Great step-by-step explanation of the code changes. Your suggestion to keep the forum link red makes total sense. Thank you.

I copied and pasted the revised code into my CSS COMMON and changed COMMON AFTER HEADER.

The forum link is not red on my desktop or iPhone and the links on my iPhone still don’t work. Very strange. What could be different about what you have and what I have such that the code works for you and not me? I don’t have any other sections filled with code, just the COMMON CSS AND COMMON AFTER HEADER with exactly the same code as you. Here is my code in the AFTER HEADER in case that is wrong (I hand-inputted that code):


(Joe) #17

For the forum link not being red. That’s totally on me. :upside_down_face:

With CSS, id based selectors are more specific (read: more important).

If you take a look at the CSS for changing the color of the links:

#bar a,
#bar a:visited {
	color: #238999;
}

#bar a:hover,
#bar a:focus,
#bar a:active,
.forum-link {
	color: #c30000;
}

You will note that there are a couple of selectors that apply to the forum link in its default state. The first one is #bar a and the second one is .forum-link

Because the first one is an id based selector (starts with hashtag) it’s more specific and will win at the end. Therefore, you were right and the link would be green and not red.

The fix is quite simple:

Modify the .forum-link selector to be more specific than than #bar a and to do this, we combine the selectors like so:

End result:

#bar a.forum-link

This will ensure that the forum link turns red.

That section of the CSS code would then become:

#bar a,
#bar a:visited {
	color: #238999;
}

#bar a:hover,
#bar a:focus,
#bar a:active,
#bar a.forum-link {
	color: #c30000;
}

I also fixed the code in my previous post.

My apologies for the confusion :sweat_smile:


Great idea to post the videos @McBlu Now I see what you mean. :+1:

I will take a look at how the Discourse header is doing it and try to replicate the effect if possible (I’m leaning towards it being a browser specific feature)

Will post back here if I figure it out.

Note:
I tried the menu links on two older devices I had laying around. One Android and one IOS, the links seem to be working fine on both. I will continue to look though.


(Blu McCormick) #18

You are the best. Thanks, III.

That makes sense about conflicting selectors. One cool thing about coding is the problem is always in the code, right? The code can only do what you program it to do. Everything is a logic problem. I’ve done a little Python programming in grad school but that is about it.

It’s really strange. This morning the links on my iPhone are working. I’ll keep an eye on it and see if that changes. If it does, it might be something to do with the discourse app, using iPhone, or Safari on the iPhone…some variable not related to the code itself, or some variable that is extra sensitive to the code. Or perhaps it’s just a matter of looking at an older coded version of the forum.

Thanks for looking into the split header and after header. Browser-specific features must be a pain in programming.

I really like the forum being permanently in red type - so simple a fix. One question I have is, can we set a time limit on the duration that the other links that you hover over turn red? Or can the other links only be red while the mouse hovers over them? What happens is when you return to the forum page, the forum link AND the alternate page on that menu that was previously opened are both highlighted in red and I’d like only the forum link to be red when users return to the forum page.


(Blu McCormick) #19

P.S. I changed the following code.

  1. I made the default menu font color #484848 (deep gray)
    CODE FOR MENU FONT COLOR

  2. I made the menu handle for the mobile menu bold to differentiate the MENU link from the other sub-links now that they are the same color
    CODE FOR BOLD MENU TITLE IN MOBILE

Here is how the drop down menu for portrait view in mobile looks now:


(Joe) #20

You’re welcome :+1:

I think you’re doing just fine :smile:

Great, I think you maybe onto something there. I have not tried the app yet so I cannot really say for sure. Speaking of which…

Is it possible that this only happens when you use the app? Can you try and what happens if you just use the browser. I tried on an older iphone and the header and after header are attached unlike what’s in your video.

Let me know.

I’m glad the simple fix worked for you.

Here’s why this occurs.

It’s because of a combination of :focus state and the link opening in a new tab.

1- you click a link
2- the link is now :active because it’s being clicked
3- the link now turns red because it’s :active
3- the link also become in :focus because it’s the last element the user interacted with.
4- the link stops being :active but it’s still red because it’s in :focus
5- because of the way you set up the links, they open in a new tab
6- the user is taken to the new tab and checks out a few things
7- the user returns to the forum tab and there are 2 links in red. The first is the forum link, and the second is the link they still clicked

The reason this happens is that the clicked link is still in :focus if the user clicks anywhere on the page the link stops being red and would turn green / grey right away.

The fix in this case is to remove the red color from the :focus state because your links open in a new tab.

So that section of the code would now become:

#bar a,
#bar a:visited {
	color: #238999;
}

#bar a:hover,
#bar a:active,
#bar a.forum-link {
	color: #c30000;
}

I think this is good idea

Let me know if you need anything. :ok_hand: