Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 26, 2020 at 10:15 pm #1225989
    sealmaster

    Hello,

    I am attempting to change the background color of two of the links in my secondary navigation bar above my header. Currently the whole background is red. Ideally, I would like the backgrounds behind “My Account” and “Cart” to be a different color, along with the remaining bar to the right of those links, making a two tone split navigation bar. I will settle for just changing the background of those two links and then resuming the red after them if the former is not possible. I can figure out how to change the main menu background colors by link, but not the sub menu.

    I have included my site url and login information in case you need it.

    Thanks

    June 27, 2020 at 5:38 pm #1226098
    Victoria

    Hey sealmaster,

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

    Best regards,
    Victoria

    June 29, 2020 at 2:35 pm #1226450
    sealmaster

    Hello,

    See mockup here: https://tendahorse.com/screenshot.png

    Thank you

    June 29, 2020 at 7:32 pm #1226555
    Victoria

    Hi sealmaster,

    With the way, it is laid out right now it might not look like that.
    Image 2020-06-29 at 20.30.43.png

    Here is the code I tried to work with:

    
#top #header_meta #menu-item-3432,
#top #header_meta #menu-item-3433 {
    color: #ffffff;
    border-color: #0df1f4;
     background-color: #0df1f4;
     height: 20px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    June 29, 2020 at 8:39 pm #1226584
    sealmaster

    Thank you for looking into it, however I would at least prefer the entire red bar behind those links be an alternate color. If that is not possible in the current setup, please advise what changes I need to make in order to make that possible.

    Thanks

    July 2, 2020 at 10:16 pm #1227586
    sealmaster

    Hello,

    I haven’t heard back and wondered if there is an alternate solution.

    Thanks

    July 3, 2020 at 7:30 am #1227682
    Ismael

    Hi,

    Sorry for the delay. You should be able to use this css code to create a smaller container with background behind the last two menu items.

    #avia2-menu::after {
	content: '';
	width: 165px;
	height: 31px;
	position: absolute;
	background: blue;
	top: -10px;
	right: -10px;
	z-index: -1;
}

    Adjust it as necessary.

    Best regards,
    Ismael

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