Header Elements / Menu Tweaks

I’m afraid my last submission may have gotten “eaten,” so I apologize if this ends up a double post, and I’ll delete it if so.

I’m finishing up my client’s punch list for http://2989eastlake.com/. There are two sets of requests, modifications to the header. If you’d prefer I split these into two topics, I understand and will do so!

1: Aligning site logo / menu items to edge of browser window

At present, the responsive design has the header appearing with the expected white space to the left and to the right, with a controlled header size, as shown here:

The client would like the logo to flush left and the menu/hamburger to flush right, as shown here:

I played with some custom CSS around absolute positioning and clearing, but I wasn’t able to make it work.

2: Styling the Menu

Because this is modifying the right-most element, I think this is connected. The client would also like the word “MENU” (which, thankfully, I figured out how to add, but can’t style) and the hamburger to be larger and to use the webfont we’re using throughout, as shown here:

And finally, if possible, the client would like the menu to flush right (right aligned or not; either is fine) to the right, as shown here:

Again, I hope this doesn’t double-post, and thanks so much for your help! I absolutely adore this theme; it’s been very easy to work with and I’m deeply appreciative of your excellent support system.

hey there

Hope you are having a good day and thank you for your question
Please add this CSS in appearance - customize - additional CSS

.main-navigation .container.nav-bar {
width: 100%;
}

  1. menu style, i just provided css for this in another ticket
  2. add this css:

.nav-open #menu {
text-align: right;
}

Thanks!
Colorlib Support Team

BRILLIANT! Thank you so much!!

A couple of last questions, I think as I look at: http://2989eastlake.com/

  1. When I go into portrait mode on a fairly large screen tablet, like an iPad, the “Menu” element collapses to the left fairly early. Is there a way to keep it pinned to the right?

  2. Is there a way to add text content just above the “MENU” option? My client is wondering about adding a couple of lines of email addresses, which he wants more prominent.

Lookin’ good!

Hi

  1. Use this css:

.module.widget-handle.mobile-toggle.right.visible-sm.visible-xs {
position: absolute;
right: 0px;
}

  1. Sorry but no, that’s not possible :frowning:

Thank you, as always, for your reply. I don’t consider a “no” answer to be a bad thing; it just affirms that what I was trying to do won’t work, and it helps me take another tactic! Thank you!!

Hi there

Dear reeveskd thank you for the kind words and for understanding :slight_smile:
hmm, this “another tactic” just worked and makes me think different, i want to help you on this last mile, want to try any chance if its possible, i can’t give you any guarantee but i will try all of my best, but i will need temporary access details to your dashboard, Please use this plugin to create temporary access for us, its automatic login link and does not requires sharing your admin details. here is How To guide. at the and don’t forget about  “Set as private reply” at the bottom of the message box  

p.s. you can use your email address in the plugin :wink:

Howdy! I appreciate the effort! I ended up taking an entirely different approach, and the client likes the solution, so I think I’ve got that licked!

Your assistance in realigning the menu elements was terrific, too, and so we think we’ve pretty much got the site where it needs to be, with one last minor item.

On mobile view, the menu is floating correctly, but the “font size +2” value I coded into the footer.php document to get the menu text to the left of the hamburger to the right size doesn’t seen dynamic. I’m not sure how to call CSS to style that element dynamically based on @media.

Currently:

Desired:

Does that make sense? I’ll get that plugin in place so you can doodle with it!

Noda, here’s the temporary login link:

http://2989eastlake.com/wp-admin/?wtlwp_token=158483483a847d8dfa0678c16276fbf5

Howdy

thank you for kind words reeveskd :slight_smile: im also satisfied that you like service from us :slight_smile:

Ok, regardgin menu word, i just checked markup and its not what it need to be, this is what you have:

<font size="+2"><b>MENU</b></font>

this is not correct and needs to be fixed, font +2 does absolutely nothing here, can you change it to something like this:

MENU

after this, it will be in our hand with more proper css selector and we will style it naturally :slight_smile:

MENU

ok, here is the code: