Tagged: ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • January 19, 2021 at 1:13 pm #1273691
    clikcreations

    Hi!

    First of all – LOVE the theme! But you guys probably hear that a lot :)

    I’m going to be creating a website and I could really use a bit of help.
    I have a design that I need to (roughly) recreate and I’m hoping it’s not too complicated. The essence of it is that each main (header) menu item needs to have a different color “button”, to tie in with the company logo (design visual linked below).

    How could this be achieved? It’s something that normally I’d have no trouble with in Adobe Muse, but those days are long gone now that the product is discontinued.

    Thank you!

    January 19, 2021 at 2:15 pm #1273713
    cherrmann

    Hi, check the source code of your page and find the IDs of the respective menu entries. Then you can use CSS like that

    #menu-item-123 {
  background-color: red;
}

    and so on..

    January 20, 2021 at 12:10 pm #1274009
    Rikard

    Hi clikcreations,

    You can do that by targeting each of the menu item ID’s like @cherrmann suggested above. You can inspect each of the menu items in your browser in order to find the ID, then follow the same structure of the example CSS.

    Best regards,
    Rikard

    January 20, 2021 at 3:05 pm #1274070
    clikcreations

    Hi!

    Thanks for the help, guys – I managed to adjust the colors as needed.
    Now onto another related issue…

    What I have now is this: https://cdn.discordapp.com/attachments/399068055092723712/801436469678964767/unknown.png

    Is there a way to control the width and height of the menu buttons? To be more in line with the original design like this: https://cdn.discordapp.com/attachments/399068055092723712/801046501283463209/unknown.png

    I don’t mind if it’s not exact/perfect, but it does need to be a bit more in line with what’s been designed already, if possible.

    Thanks again for the help! :)

    January 20, 2021 at 4:08 pm #1274093
    clikcreations

    Update:

    Digging more I have managed to expand the menu buttons to the sides, though there’s still a lot of room for improvement…

    Here’s where I’m now: https://cdn.discordapp.com/attachments/399068055092723712/801451669316567060/unknown.png

    It would be great if I could:
    1) Make the menu buttons about 1/3 the height, still centered vertically (keeping the logo same height)
    2) Adjust the *highlight* color of the sub-menu item background (currently light gray) OR change the font color (I already changed normal color to black, but it did not change the highlight – seems to be tied to the main menu!)
    3) Make the menu buttons all same width, with text centered (as per original design)

    Again, the original design is here: https://cdn.discordapp.com/attachments/399068055092723712/801046501283463209/unknown.png

    I’m loving Enfold, but I wish there were more exposed options for certain things, or at least more presets to work with in terms of menus.

    Thanks!

    • This reply was modified 3 years, 10 months ago by clikcreations.
    January 21, 2021 at 2:35 pm #1274375
    clikcreations

    BUMP – any help would really be appreciated!

    January 21, 2021 at 3:43 pm #1274396
    Victoria

    Hi clikcreations,

    You can set the custom header height in the Theme options > Header:
    Screenshot 2021-01-21 at 15.43.14.png

    If you need further assistance please let us know.
    Best regards,
    Victoria

    January 21, 2021 at 3:57 pm #1274407
    clikcreations

    Hi, this isn’t what I need, because it would also make the logo tiny. I need to be able to control the height of the menu buttons themselves, while keeping the header the same size, including the large logo. This is why I attached the screenshots of the design I’m trying to (somewhat) follow.
    As it stands now – the huge menu buttons are essentially unusable. If I could shave off 2/3 of their height – that would be perfect.

    I tried digging through the code and making adjustments using the browser inspection tools, I managed to expand the buttons width-wise as needed, but I couldn’t figure out how to reduce their height.

    January 21, 2021 at 4:15 pm #1274423
    clikcreations

    I’ve quickly made a mockup to illustrate.

    Here’s where I’m at: https://cdn.discordapp.com/attachments/399068055092723712/801816849460363274/menu_as-is.png
    Here’s where I’d like to be: https://cdn.discordapp.com/attachments/399068055092723712/801816848542728212/menu_as-needed.png

    January 21, 2021 at 5:46 pm #1274470
    Victoria

    Hi clikcreations,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top #header_main > .container, 
#top #header_main > .container .main_menu .av-main-nav > li > a,
 #top #header_main #menu-item-shop .cart_dropdown_link {
    height: 50px !important;
    line-height: 50px !important;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    January 21, 2021 at 6:23 pm #1274495
    clikcreations

    Thanks for this, Victoria!

    I tried it and it basically made the logo tiny, along with the rest of the menu + added some strange behavior.

    Example 1:
    https://cdn.discordapp.com/attachments/385832793529384960/801845733682577448/unknown.png
    Here you see that the logo is now tiny and there’s now a big gap under the menu, rather than above AND below it.
    Is it seriously not possible to retain the big logo and have the menu smaller (as is now), but centered vertically within the space? The code snippet you suggested just shrinks down the whole header container, rather than trimming the menu buttons. I need to trim the menu buttons to make them smaller, but keep the logo big.

    I have faith that someone here could propose a solution.

    Thanks again!

    January 21, 2021 at 7:11 pm #1274505
    clikcreations

    YES!

    I have *sort of* a solution!

    Here’s what I got: https://cdn.discordapp.com/attachments/399068055092723712/801860396020400156/unknown.png

    And the code I changed to get there (after trial and error with the browser editing tools) was as follows:

    .logo {
overflow: visible !important;
height: 180% !important;
}

.logo a {
overflow: visible !important;
height: 180% !important;
}

.main_menu {
padding-top: 45px !important;
}

#header_main {
padding-top: 5px !important;
padding-bottom: 95px !important;
}

    This basically solves the menu issue, but I will need to relocate the “call us now” line (top bar above menu) because it was now awkward with all that spacing. I wish I could put text just above the menu, where the empty space is, but I don’t think it’s possible without layering. Would be super helpful if possible. Is it?

    January 21, 2021 at 7:32 pm #1274510
    clikcreations

    ignore this post – I did not find a way to delete it

    • This reply was modified 3 years, 10 months ago by clikcreations. Reason: solved my own question using info from the forum
    January 22, 2021 at 2:49 am #1274567
    Jordan Shannon

    Hi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.