Moving location of mobile menu etc

[kenziejoy]

Someone on my team asked if I can move the menu on mobile so that is beside the header icon rather than below it. Is this a hard thing to do? What search terms would I use to find a walkthrough? I've only found things that are not quite what I want so far.

Also a side note. I'd like to change the header picture file when the screen gets to a certain size. I tried using a media query with a link to the new header but it doesn't seem to be working. Has anything changed about Genesis that I should try a different tactic? I was following a walkthrough from 2013 so it's possible but I haven't found a a more recent one.

Thank you.

http://everydayambassador.org/

[Porter]

Your header basically has two areas, with selectors as follows:

.site-title

.header-widget-area

Both of those are contained within:

.wrap

What you want to do, is set the widths of those areas to % values (or pixels values so that the math works out, but I personally use %), so that both can fit within wrap. You have 1140 pixels to work with when on a full screen desktop, that goes down as you get into media queries. Since you're mobile menu is tiny, and the logo a bit bigger, try setting the site-title width to 60%, and the header-widget-area to 40%, at various media queries (you may need to do 80 / 20, 70 / 30, depending on how much room there is). Once the widths are set, make sure that site-title has float: left, so that the menu can pop back up to the top next to it, rather than go below.

That's the gist of how to do it, give that a try, and let me know if you need any more help.

Example code:

Find:

@media only screen and (max-width: 1023px)
.title-area {
    position: relative;
    margin-bottom: 6px;
}

Change to:

@media only screen and (max-width: 1023px)
.title-area {
    position: relative;
    margin-bottom: 6px;
    width: 60%;
    float: left;
}

Do the same for header-widget-area, with no float left, and 40% width - then repeat / adjust sizes for each media query size.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[kenziejoy]

This reply has been marked as private.

[Author]

Posts