Add a new menu on Dyad Theme

letsdesigntogether · Member · Jul 14, 2016 at 8:04 pm
Copy link

Add topic to favorites
Hi, there!

My blog has the primary menu on top right. I’d like to add a new menu (could be a widget, maybe) with links to other 2 WordPress pages. This new menu would be on top left. Is it possible with css? How could I do it?

Thank you.

Ps: the blog I am using for this topic is just for testing.

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Jul 14, 2016 at 8:26 pm
Copy link
You should just be able to add them to the front of your existing menu and then scoot them over to the left by targeting the unique ID of the menu item. In your example case you could move the first two items using the following code:
```
#menu-item-43, #menu-item-48 {
  float:left;
}
```
thesacredpath · Member · Jul 14, 2016 at 8:28 pm
Copy link
On Dyad, it would be challenging to move a widget up into the header area and have it work well on all screen sizes. As an alternative to that, what if you added them to the left of the main menu and then used some CSS to float those to the left, beside your site title? I’ve worked out a bit of demo code for you that moves your Historia menu item to the left. Add the following CSS to see what that would look like.
```
#menu-item-43 {
    float: left;
}
```
Give that a test and see what you think and let me know.
letsdesigntogether · Member · Jul 14, 2016 at 8:43 pm
Copy link
It worked! Thank you!

But I think it is not left enough. Can I put it lefter?
letsdesigntogether · Member · Jul 14, 2016 at 8:47 pm
Copy link
Or maybe place it where the title is?
thesacredpath · Member · Jul 14, 2016 at 9:16 pm
Copy link
We can hide the title and take them fully to the left. You can give this a try.
```
@media screen and (min-width: 961px) {
#site-navigation {
    width: 100%;
}
.site-branding {
    display: none;
}
#menu-item-43 {
    float: left;
}
}
```
I’ve done this in a Media Query so that things don’t go awry when the menu goes to the touch device menu at 960px. On the touch device menu at 960px and below, things will revert to the original design and the items would show as normal menu items.

We can also style the menu items to the other sites differently from the original menu items so that they are differentiated from the others.
letsdesigntogether · Member · Jul 14, 2016 at 11:27 pm
Copy link
Thank very much! Worked perfectly!

One last question: now after doing it all, is it possible to put the title in the middle?

Thanks
thesacredpath · Member · Jul 15, 2016 at 1:36 am
Copy link
You can give this a try. To do this, I had to use position: absolute; on the title div, which means you end up losing it as a link to your home page, so you would need to include a link to Home in your menu.

The other thing that could be an issue is the menu and title overlapping each other if your title gets longer, or you add more links to the right side of the menu.
```
@media screen and (min-width: 961px) {
#site-navigation {
    width: 100%;
    position: relative;
    z-index: 1;
}
.site-branding {
    position: absolute;
    z-index: 0;
    width: 100%;
    text-align: center;
}
#menu-item-43 {
    float: left;
}
}
```
letsdesigntogether · Member · Jul 15, 2016 at 1:40 am
Copy link
Yeah, it didn’t work very well. But I’ll try something else.

Thank you very much for the help!
thesacredpath · Member · Jul 15, 2016 at 1:42 am
Copy link
You are welcome.

No items found.