I wrote this

I wrote this in the forums, but figured I'd get a quicker answer here. This is not about the WPMU Dev Dashboard, because I installed the Upfront theme manually and thus it was not select-able in the form's choices above.

My client wants me to create a minimalist, clean design with regards to http://www.attitudeliving.com, but I have no idea how to make my navigation menu 'pop' or look distinct. Especially more so in a drag-and-drop theme builder like Upfront. I don't reckon I can use plugins like Max Mega Menu or any Mega Menu extension because from what I've observed about Upfront, it's very single-minded as in, when it is employed, it alone must be used and there is no way to add a widget from the back-end.

Thank you so much for reading this and your help in advance.
I'd really love to be an expert in WordPress, but I have so little time.
I'm gonna probably have to tell my client to give me more time...SIGH

  • Predrag Dubajic

    Hey caleb.mkdaman,

    Hope you're doing well today :slight_smile:

    Upfront has not been tested with Max Mega Menu or Mega Menu so I'm not sure how would those work with the theme.
    If the menu is added via widget you can use Widget element with Upfront to add your menu.

    I had a look at the linked site but I'm not sure that I understand what are you trying to replicate from that menu, are you looking to add borders like there, hover effect, similar dropdown menu, etc.

    This visual changes should all be possible with some CSS code and we can help you out with that if you could give us some more info about what you're looking for :slight_smile:

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi caleb.mkdaman,

    Ah, ok, so pretty much everything. :slight_smile:

    What would be best to do for start is create separate region for your menu and then style it there, because with current setup it will be white menu box in the middle of your header background and I don't believe that would look nice:

    Since this would require quite a few lines of code would you mind granting support access so we can apply it right away and see the changes live?
    To enable support access you can follow this guide here:
    http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Best regards,
    Predrag

  • Adam Czajczyk

    Hello caleb.mkdaman!

    Er....no one has logged in yet. Not being impatient, just waiting in anticipation

    I'm sorry about keeping you waiting. Just for further reference: it's better to wait until a replay from staff member before writing another post because posting multiple posts 'in a row" causes the thread to be "pushed down the queue" (and we're expected to respond in order from oldest to newest to minimize waiting time) so it's quite opposite to what happens on a regular forums ("thread bumping"). Sometimes it may cause additional delay if we are handling more questions than usually. I think you might want to know that :slight_smile:

    That said, thanks for granting access.

    I don't feel quite confident in my "design abilites" so I'd personally rather avoid giving you any advice on a background image choice but I think you may want to ask that question on our "Members" forum and I"m sure other member of our community will be able to give you some useful tips and suggestions on this.

    As for the menu. I took a look at your site and just like my colleague Predrag already declared, I'm sure we'll be able to help you with this but I'm still not sure what to do exactly. I reviewed the "example" site and I think I pretty much understand the goal but here are some concerns that I think we should address first:

    1. On the "example" site the mehu and header isn't that "tall" as it currently is on your site; the header layout is different so do you want to stick to your current "structure" (tall header, centered logo over the menu) or mimic the "example" one as closely as possible?

    2. The entire header should be "sticky" or - if this would be possible - just menu?

    3. You mentioned an image in header background: on an example page the background for an entire sticky header is white and it's the same color that is the background for the menu; as I mentioned, I'm not much of a designer so I'd prefer to get a better picture of how this should be done on your site

    3. Finally, it would be just great if you could create an example menu structure (that doesn't have to point to any existing page/post/URL actually as you can always change it later) that we could use for testing; by that I mean entire menu with sub-menus etc; you can create it easily the "usual WP way" on the "Appearance -> Menus" page in your site's backend; just let me know about the name of that menu.

    Please advise. One of us will then access your site and I'm sure we'll be able to help you get this to work then :slight_smile:

    Have a great day!
    Adam

  • caleb.mkdaman

    Oh, I see. Sorry about causing my post further delay - I will from now on, cease to double post.

    Oh, and sorry for being a tad impatient.

    Thank you for your detailed answer and offer for help. Also, kudos for showing candour - I will ask about DESIGN on the Member forums.

    As for your questions:

    1. I spose my structure is unique, but I would like to mimic that site's layout as much as humanly possible. The logo on the left, perhaps my 100% nature right next to it; social media icons on the right, and shopping cart as well. But that's just for the bit above the nav menu.

    2. I think the entire header should be sticky - since we're focused on the brand MORE than merely the Nav menu.

    3. I will try my utmost best to create a menu structure, but I must warn you first that I'm terrible at WordPress, but I WILL do my part - I will let you know the name.

    I am having a great day, Adam. You guys are so professional and helpful at the same time. Where else can I find such stellar support? Oh, and I hate insincere flattery.

    Thank you so much! :grin:

    Sincerely,
    Caleb

  • Predrag Dubajic

    Hi Caleb,

    Could we take a step back and take care of the menu first? :slight_smile:

    I added some CSS to your site so please check it out and let us know if that's what you want with your menu.

    This is the code used:

    /*Custom menu styling*/
    #upfront-region-container-index-header .upfront-grid-layout {
        width: 100%;
    }
    
    .upfront-grid-layout .upfront-output-unewnavigation {
        background: #fff;
        min-height: 10px;
        padding: 0;
        -webkit-box-shadow: 0 4px 4px -2px #000000;
        -moz-box-shadow: 0 4px 4px -2px #000000;
        box-shadow: 0 4px 4px -3px #000000;
        border-top: 1px solid #a7a7a7;
    }
    
    body .upfront-output-layout #upfront-region-container-index-header .upfront-grid-layout .upfront-output-unewnavigation .menu-item a {
        color: #000;
        border-left: 2px solid #a7a7a7;
        padding: 0 20px;
        border-bottom: 2px solid #fff;
    }
    body .upfront-output-layout #upfront-region-container-index-header .upfront-grid-layout .upfront-output-unewnavigation .menu-item a:hover {
        color: #000;
        border-bottom: 2px solid green;
    }
    
    body .upfront-output-layout #upfront-region-container-index-header .upfront-grid-layout .upfront-output-unewnavigation .menu-item {
        padding: 10px 0;
    }
    
    body .upfront-output-layout #upfront-region-container-index-header .upfront-grid-layout .upfront-output-unewnavigation .menu-item:first-of-type a {
        border-left: none;
    }
    
    body .upfront-output-layout #upfront-region-container-index-header .upfront-grid-layout .upfront-output-unewnavigation .menu-item ul.sub-menu {
        background: #fff;
        margin: 0;
        border: 2px solid #a7a7a7;
        border-top: none;
    }
    
    body .upfront-output-layout #upfront-region-container-index-header .upfront-grid-layout .upfront-output-unewnavigation .menu-item ul.sub-menu a {
        font-size: 16px;
        border: none;
    }
    
    body .upfront-output-layout #upfront-region-container-index-header .upfront-grid-layout .upfront-output-unewnavigation .menu-item ul.sub-menu a:hover {
        color: green;
    }

    Please note that some CSS changes will not be visible in Upfront editor but they will still show up on front end.

    Best regards,
    Predrag

  • caleb.mkdaman

    Thank you so much Predrag. Only thing is, if I can't see the menu in Upfront, how do I edit it to go to other pages?

    Is it also possible to make my header image look instead like this: http://i.imgur.com/U9XFQct.png?

    Thanks. Of course I would prefer if the color of the header bar would be a shade of green as I would be promoting eco-friendly, natural products through the website. I'm really behind on this project, so would appreciate your soonest feedback.

    Also, since additional posts push my question further down the queue, what else can I do to beautify my website? I'm out of ideas - your suggestions would certainly be welcomed.

    Lastly, I would appreciate it if you could take the lines out of the footer menu. It looks better not tabled than it is now. And do you also think I should mimic Attitude's website completely? I'm a newbie at designing websites, so I don't know how to craft my own design identity... :slight_frown:

  • Predrag Dubajic

    Hi Caleb,

    Only thing is, if I can't see the menu in Upfront, how do I edit it to go to other pages?

    I had to split your menu and header in two regions, but they are both global regions so all you need to do to on other pages is make sure "menu-region" and "new-header-region" regions are added there.
    Also, menu will be still seen in UF editor just some CSS changes that I applied will be visible only on front end.

    Is it also possible to make my header image look instead like this: http://i.imgur.com/U9XFQct.png?

    Have a look now after latest changes and let me know if that's what you're after :slight_smile:

    Of course I would prefer if the color of the header bar would be a shade of green as I would be promoting eco-friendly, natural products through the website

    Background image can easily be changed, I'm just afraid that it might be a bit of overkill, is this something you had in mind perhaps:

    Also, since additional posts push my question further down the queue, what else can I do to beautify my website? I'm out of ideas - your suggestions would certainly be welcomed.

    I'm not a designer myself so I couldn't really give you much helpful advice but there's usually other users willing to help with suggestions if you ask them on our members forum :slight_smile:
    https://premium.wpmudev.org/forums/forum/members

    Lastly, I would appreciate it if you could take the lines out of the footer menu. It looks better not tabled than it is now.

    Oh, you're talking about the shadows, right?
    Those got added by mistake when I was adding CSS for menu shadow, it should be taken care of now.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.