Off-canvas menu

military980
Active member
Topic Author
Offline
New Member

16 hours 54 minutes ago #52131 by military980

Off-canvas menu was created by military980

I was wondering if somebody could help me with a couple changes I would like to make to the off-canvas menu on the architecture template?

1) I would like to have the horizontal line in the off-canvas menu be above the word and not through it (like the text on the right hand side of the carousel)...how can I change it?

2) I would like to replace the three horizontal lines, that open the off-canvas menu, to my logo.

Any help or guidance would be very much appreciated.

Please Log in to join the conversation.

milos
Support Staff
Offline
Moderator

14 hours 18 minutes ago #52132 by milos

Replied by milos on topic Off-canvas menu

Hello,

1. Edit file /media/templates/site/architecture/css/custom.css and around line 108 change this:

Code:

ul.menu.offcanvas_sparky > li.active::before {
    content: "";
    display: block;
    width: 150px;
    height: 1px;
    background: #fff;
    position: absolute;
    left: 40px;
    margin-top: 9px;
}

to this:

Code:

ul.menu.offcanvas_sparky > li.active::before {
    content: "";
    display: block;
    width: 150px;
    height: 1px;
    background: #fff;
    position: absolute;
    left: 40px;
    margin-top: 0;
}

2. In the same file, at the top of the file, add this:

Code:

.offcanvas-btn {
    background: url(../images/logo_image.png);
    background-size: 42px 84px;
}

Change logo_image.png with your actual logo image. Upload the logo image to the folder /media/templates/site/architecture/images. Change 42px 84px with the actual width and height of your logo image in pixels.

Regards,
Milos

Please Log in to join the conversation.

milos
Support Staff
Offline
Moderator

14 hours 15 minutes ago #52133 by milos

Replied by milos on topic Off-canvas menu

One more thing, your logo image should actually contain the upper and lower parts. See this default menu icon image: demo.hotjoomlatemplates.com/architecture...e/images/tinynav.png

The top part is the hamburger menu image. The lower part is the X image that is used to close the menu. So, in the top part of your image you should have your logo, and at the bottom part, the X image for closing the menu.

Regards,
Milos

Please Log in to join the conversation.

Time to create page: 0.172 seconds