Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • October 17, 2018 at 11:20 pm #1023044
    webWahine

    Hello
    I’ve styled two menu items in the secondary menu using item ids, but I can’t seem to make 2 items the same fixed width (using 300px as a test width). Also, for the ‘contact’ button, I have that set to ‘bordered’ but can’t target the correct reference to change its styling, so used item id. I have been able to style both bordered and colored in the main menu, but again, I can’t seem to get 2 items to be the same width in the main menu, either.

    I’ve looked at lots of posts but the min-width doesn’t seem to be working. Thank you in advance.

    /* custom button - contact ******************/

#menu-item-49 {
	/* padding-right: 60px !important; */
}
	
#menu-item-49 a {
	color: #000 !important;
	border: 1px solid #000;
	background-color: #00ffff !important;
	padding: 7px 15px 5px 15px;
	/* box-shadow: 5px 5px 5px rgba(0,0,0,0.4); */
	min-width: 300px !important; /* not working */
}

/* custom button - request a quote ******************/

#menu-item-45 {
	/* padding-right: 60px !important; */
}
	
#menu-item-45 a {
	color: #fff !important;
	border: 1px solid #000;
	background-color: #ff00ff !important;
	padding: 7px 15px 5px 15px;
	/* box-shadow: 5px 5px 5px rgba(0,0,0,0.4); */
	min-width: 300px !important; /* not working */
}
    October 18, 2018 at 6:22 pm #1023548
    Victoria

    Hey webWahine,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    October 18, 2018 at 9:03 pm #1023648
    webWahine

    Sure –
    Brodered/colored secondary & main menu items, all with a set width

    So, to be really clear, I have targetted the 2 secondary menu items by id as I can’t seem to find the right element to style the bordered/colored.

    For the main menu I can style the bordered/colored items.

    For both secondary and main I want each of the 4 items to have the same width, ie, 300px. Using min-width: 300px in both cases didn;t work. Thanks again :)

    October 19, 2018 at 4:06 pm #1023982
    Victoria

    Hi webWahine ,

    Thank you, much more clear now. Can you please remove the code you added and we’ll try to style it for you?

    Best regards,
    Victoria

    October 19, 2018 at 6:18 pm #1024157
    webWahine

    I commented out the styling specific to the secondary menu items, and as you can see even though ‘CONTACT’ is set to bordered and ‘REQUEST A QUOTE’ is set to colored, they show up without any styling different than the default menu items.
    Secondary menu –
    #menu-item-49 ‘CONTACT’ is bordered
    #menu-item-45 ‘REQUEST A QUOTE’ is colored

    For the main menu, I removed the styling for bordered and colored, and unique styling for both does show, unlike the seocndary menu.
    Main menu –
    #menu-item-52 ‘CONTACT’ is bordered
    #menu-item-53 ‘REQUEST A QUOTE’ is colored

    Thanks, again! :)

    October 21, 2018 at 8:30 pm #1024585
    Victoria

    Hi webWahine,

    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

    
#menu-item-45 a {
	color: #fff !important;
	margin: 0 auto !important;
	background-color: #ff00ff !important;
	padding: 11px 35px 11px 35px;
}
#top #header #menu-item-49 a {
	color: #fff !important;
	border: 2px solid #000;
	background-color: #00a4ed !important;
	padding: 9px 64px 9px 64px;
}
#top #wrap_all .header_color #menu-item-53.av-menu-button-colored > a .avia-menu-text {
	background-color: #000 !important;
	border-color: #000;
	padding: 10px 35px 10px 35px;
	margin-left: 10px;
	margin-right: 10px;
}
#top #wrap_all .header_color #menu-item-52 > a .avia-menu-text { 
	padding: 10px 64px 10px 64px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 21, 2018 at 11:05 pm #1024621
    webWahine

    Hello, Victoria

    Yes, that worked! I was trying to make it adjustable with min-width but it just wasn’t recognising that. Am I correct in assuming that it is better to target the secondary menu bordered and colored items by their id as opposed to referencing bordered or colored, like the main menu? Thank you very much!

    October 22, 2018 at 5:42 pm #1025015
    Victoria

    Hi webWahine,

    Not sure I understand this questions:
    “Am I correct in assuming that it is better to target the secondary menu bordered and colored items by their id as opposed to referencing bordered or colored, like the main menu? ”

    In any case, the more specific selector for the menu item will work.

    Glad we finally got it working for you.

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

    October 22, 2018 at 5:55 pm #1025024
    webWahine

    What I mean is how do I target the bordered/colored secondary menu items without using their specific item id? For example, if I wanted to style 3 colored items all the same way, what is the correct element in css to account for multiples?

    Thank you, again! :)

    October 22, 2018 at 11:54 pm #1025182
    Vinay

    Hi,

    Your requirement is not clear to me. However, if you like to know the CSS selectors please check https://kriesi.at/documentation/enfold/menu/#top-bar-menu

    If you still have any issue please upload a screenshot/mockup to one of the below sites and share the link here so we can help you better :)

    https://snag.gy/
    https://ctrlv.cz/en/
    https://imgur.com

    Best regards,
    Vinay

    October 23, 2018 at 7:08 pm #1025558
    webWahine

    thank you, Vinay, but that link does not include what I’m asking about, ie, how to style the bordered and colored buttons in the top/secondary menu. To be super clear, I can style the main menu as Victoria sent, above –

    #top #wrap_all .header_color #menu-item-53.av-menu-button-colored > a .avia-menu-text {
	background-color: #000 !important;
	border-color: #000;
	padding: 10px 35px 10px 35px;
	margin-left: 10px;
	margin-right: 10px;
}

    All I want to know is how to style more than one colored menu items the same way in the top/secondary menu, without using the item id. Hope that makes sense now. A picture wouldn’t show you anything; it’s the css to target this that I’m looking for, eg something like this –

    #top #wrap_all .what goes here to target the secondary menu .av-menu-button-colored > a .avia-menu-text {
    /* styling here */
    }

    Thanks, again!

    October 23, 2018 at 8:30 pm #1025602
    Vinay

    Hi,

    Thank you for the clarification. As I understand you want to target the 2 buttons int he top bar menu “Contact” and “Request a quote” correct?

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    
#top #header #header_meta .sub_menu > ul > li.menu-item-object-page a {
	color: gold !important;
}

    Best regards,
    Vinay

    October 23, 2018 at 10:32 pm #1025659
    webWahine

    That definitely works, thanks, but I’d like to be able to target, say 2 bordered buttons, and 2 colored (not on my test site at the moment), so drill into that element level – this code applies to both bordered and colored. Hope that makes sense? :)

    October 24, 2018 at 6:28 pm #1026038
    Victoria

    Hi webWahine,

    Well, you need to check the elements classes or even id if they have those.

    Best regards,
    Victoria

    October 24, 2018 at 6:43 pm #1026043
    webWahine

    Ok, so you mean that I need to use element id’s for the secondary menu – that’s fine, thanks :)

    October 26, 2018 at 11:46 am #1026728
    Victoria

    Hi webWahine,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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