Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • October 30, 2015 at 11:00 am #527284
    wedesignshanghai

    Hi!

    I would like to adjust the appearance of a custom menu widget, to make it look as if the menu items were tab elements
    would be great if you can help me with some code ;)

    Thank you!

    October 31, 2015 at 11:58 pm #528015
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    #top .widget_nav_menu ul:first-child> li{
    background: transparent !important;
    padding-right: 49px;
    padding-left: 51px;
    left: -51px;
    top: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 0;
    width: 100%;
    box-shadow: none;
    border-bottom: 1px solid #E2E2E2;
    border-right: 1px solid #E2E2E2;
}

#top .widget_nav_menu ul:first-child>li:last-child{
    border-bottom: 0;
}

#top .widget_nav_menu ul:first-child>li.current-menu-item {
    border-right: 0;
}

.sidebar_left main.template-page.content,
.sidebar_left aside.sidebar.sidebar_left.alpha.units {
    border: 0 !important;
}

    Cheers! 
    Josue

    November 2, 2015 at 4:11 pm #528565
    wedesignshanghai

    Hi Josue,
    thank you for the code, it works

    do you think is possible to add the shadow as in the image reference?

    View post on imgur.com

    ant have it aligned to the left?

    thank you!!

    November 3, 2015 at 3:58 am #528959
    Ismael

    Hey!

    Try to add this:

    #top .widget_nav_menu ul:first-child> li {
    -webkit-box-shadow: inset -2px 0px 1px 0px rgba(207,207,207,1);
    -moz-box-shadow: inset -2px 0px 1px 0px rgba(207,207,207,1);
    box-shadow: inset -2px 0px 1px 0px rgba(207,207,207,1);
}

#top .widget_nav_menu ul:first-child> .current_page_item {
    box-shadow: none;
}

    Adjust as needed.

    Cheers!
    Ismael

    November 6, 2015 at 1:54 pm #531432
    wedesignshanghai

    Hi! thank you for the code
    I’ve applied it and looks like this:

    View post on imgur.com

    doesn’t look like a shadow :(
    and what about the text alignment to the left, is it possible?

    thanks!

    November 6, 2015 at 2:10 pm #531439
    wedesignshanghai

    ok after playing with the numbers, the closest I can get to the smooth vertical shadow is this:

    View post on imgur.com

    by adjusting this line
    box-shadow: inset -2px 0px 1px 0px rgba(207,207,207,1);

    but looks like that shadow applies for all the lines, would be possible to adjust just the vertical one?
    as in the reference:

    View post on imgur.com

    thank you!

    November 7, 2015 at 9:24 pm #531934
    Josue

    Hi!

    Try with this code instead:

    #top .widget_nav_menu ul:first-child> li {
    position: relative;
}

#top .widget_nav_menu ul:first-child> li.current-menu-item:after {
    content: "";
    display: none;
}
#top .widget_nav_menu ul:first-child> li:after {
    content: "";
    box-shadow: inset -8px 0px 20px -10px rgba(0, 0, 0, 0.2);
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 10px;
}

    Cheers!
    Josue

    November 10, 2015 at 11:03 am #533136
    wedesignshanghai

    it works! thank you!!
    do you think is possible to change the % of the sidebar? right know is 20% 80% is the max I can adjust in settings
    would be possible to change that proportion? 10% 90% ?

    thank you!

    November 10, 2015 at 11:27 am #533151
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    #top .container .av-content-small.units {width:90%; }

    Cheers! 
    Josue

    November 10, 2015 at 11:50 am #533162
    wedesignshanghai

    Thank you Josue!
    works perfect!

    would be possible to align that menu items to the left?

    thanks!

    November 10, 2015 at 11:58 am #533169
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    .sidebar .widget_nav_menu  li {
    text-align: left;
}

    Cheers! 
    Josue

    November 10, 2015 at 12:56 pm #533183
    wedesignshanghai

    thank you!

    November 10, 2015 at 1:06 pm #533186
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

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