Add a second navigation bar to Adelle theme

woman2womenblog · Member · Oct 5, 2014 at 9:21 pm
Copy link

Add topic to favorites
My blog is bilingual, English and Greek, and I would like to add a second navigation bar for the Greek menu (I have it currently on the side bar). Is it possible to do that?
Ideally, I would like to have the English bar on top of the header and the Greek bar under the header…
Thanks a lot!

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Oct 6, 2014 at 5:53 pm
Copy link
It’s not possible to add new design elements such as a 2nd menu bar using CSS only. You can use CSS to adjust existing elements on a page once they are added through theme or blog options.

One possible solution in your case might be to add a Greek option to the main menu and put the other options in a sub menu. I can see how that’s not the most ideal, but I thought I’d suggest it first in case it works out.

Another possible solution might be to use CSS to change the position and appearance of the ΕΛΛΗΝΙΚΑ menu you added to your sidebar. Making a change like this is advanced work. I can help get you started by providing a little CSS so you can see how it might work. There are a few problems with this solution that will need additional attention such as possibly hiding it or adjusting the height for it in the mobile view. Also, I don’t see an easy way to make submenus work when using this method.

Here is what I worked on and came up with to help get you started. I did it in 3 sections and I’ll give them to you one by one. First, here is some CSS that moves the Greek menu from the sidebar to the top using absolute positioning. You can find out more about absolute positioning at http://css-tricks.com/absolute-positioning-inside-relative-positioning/
```
#main {
	position: relative;
}

#nav_menu-3 {
	background: none;
	position: absolute;
	left: 0;
	top: -35px;
	width: 100%;
	margin: 0;
	padding: 0;
}

#nav_menu-3 .widget-title,
#nav_menu-3 .sub-menu {
	display: none;
}

#nav_menu-3 ul {
	padding: 0;
}

#nav_menu-3 li {
	float: left;
}
```
This next section adds back some formatting to make the menu look more similar to the main menu:
```
#nav_menu-3 {
	background: #dadada;
	clear: both;
	display: block;
	float: left;
	width: 100%;
}
#nav_menu-3 ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}
#nav_menu-3 li {
	float: left;
	position: relative;
	line-height: 1;
	margin: 0;
}
#nav_menu-3 a {
	color: #595959;
	display: block;
	font-size: 13px;
	font-size: 1.3rem;
	padding: 1em;
	text-decoration: none;
	text-transform: uppercase;
}

#nav_menu-3 li:hover > a {
	text-decoration: underline;
}

#nav_menu-3 li.current_page_item a,
#nav_menu-3 li.current-menu-item a {
	color: #595959;
}
```
This next section copies all the CSS from the theme’s style.css file that make the littler ribbon styling on the left and right of the menu work. Note that the @media part is a media query that limits those changes to large screens. You can find out more about media queries at http://en.support.wordpress.com/custom-design/custom-css-media-queries/
```
@media screen and (min-width: 63.750em) {
	#nav_menu-3 ul {
		margin-left: 2.5em;
	}
	#nav_menu-3:before,
	#nav_menu-3:after {
		border: 1.4em solid #dadada;
		content: "";
		display: block;
		position: absolute;
		bottom: 0;
		top: 0;
		z-index: 1;
	}
	#nav_menu-3:before {
		border-left-color: #fff;
		border-right-width: 1.5em;
		left: 0;
	}
	#nav_menu-3:after {
		border-left-width: 1.5em;
		border-right-color:#fff;
		right: 0;
	}
}
```
As you can see, a change like this one will take some time and work to implement. Hopefully the CSS above will help you get started and give you a glimpse at a possible solution to see if it’s something you want to continue pursuing.
woman2womenblog · Member · Oct 6, 2014 at 9:06 pm
Copy link
Excellent! It worked! I see though, like you wrote, that there are a few little problems:
1) with the mobile format. Is there any possibility to modify the bar size for mobile view?
2) the sub menus won’t appear… Any suggestions?
3)The circle with the date of upper post overlaps with the greek bar, can we move that downward?
And a last one, less important;
4) The greek bar is slightly thinner than the greek one, can we make it look with the same width?

Thanks a million for your valuable help…
woman2womenblog · Member · Oct 6, 2014 at 9:10 pm
Copy link
4) The Greek bar is slightly thinner that the English one… sorry about that…
designsimply · Member · Oct 7, 2014 at 12:36 am
Copy link
Yes, there are some limitations with a CSS-only solution.

1) with the mobile format. Is there any possibility to modify the bar size for mobile view?

Collapsing the 2nd menu like the main menu won’t be possible because that works using JavaScript and not CSS-only. Here at WordPress.com, you have the option to add CSS but you cannot modify other code such as HTML, PHP, or JavaScript.
designsimply · Member · Oct 7, 2014 at 12:41 am
Copy link
2) the sub menus won’t appear… Any suggestions?

I hid them with this rule because they didn’t look good with the other menu. Here is the rule used to hide them:
```
#nav_menu-3 .widget-title,
#nav_menu-3 .sub-menu {
	display: none;
}
```
You can remove the “#nav_menu-3 .sub-menu” part of that block to make the submenus display again, but I don’t think it looks very good and I think if you can limit to just one row it would look better.
designsimply · Member · Oct 7, 2014 at 12:46 am
Copy link
3)The circle with the date of upper post overlaps with the greek bar, can we move that downward?

To do this, add one rule and adjust another. The following rule determines how much space is above the “.site-main” container. It is originally 2.5em and this rule changes it to 4.5em.
```
.site-main {
	margin-top: 4.5em;
}
```
After that, find the block that starts with “#nav_menu-3” and change the -45px value to -4.5em. Adjust the number as needed.
designsimply · Member · Oct 7, 2014 at 12:55 am
Copy link
4) The greek bar is slightly thinner than the greek one, can we make it look with the same width?

4) The Greek bar is slightly thinner that the English one… sorry about that…

Find this block:
```
#nav_menu-3:before, #nav_menu-3:after {
	border: 1.4em solid #dadada;
	content:"";
	display:block;
	position:absolute;
	bottom:0;
	top:0;
	z-index:1
}
```
Change 1.4em to 1.7em.

And add this:
```
#nav_menu-3 li {
	padding-bottom: 3px;
	padding-top: 3px;
}
```

No items found.