Canvas Support

Menu with title centered

11 replies · opened Apr 22, 2020

Rrashmipatel829Apr 22, 2020

Hi, need help with the following:

  1. I have a logo on the left side and right side and have a title that I want to center in between but don't know how to get it to align (see image)

  2. On the menu bar, I need to put in 2 more icons (one for the search and other one for logout) but can't fit them. How do I make them fit in the same line? (see image: circled)

Thanks

Rrashmipatel829Apr 22, 2020

By the way, I am using the Menu-7.html file to work.

SSemicolon WebSTAFFApr 23, 2020

Hello,

  1. The Header Style you are trying to achieve will require Considerable Customized Codes and structural changes. Unfortunately, a Template or Design Functionality related to this is currently not included with Canvas. Any further customization or feature/functionality enhancements is your responsibility as we currently do not provide Customization related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy .

We are working on more flexible headers at the moment and will definitely add options to implement this design in a future update. Thanks for your Patience.

  1. As there are many Items in the Menu, you can consider decreasing the Size, padding of the Text according to your need using the following CSS Code:

#primary-menu ul li > a {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 12px;
    letter-spacing: 0px;
}

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Rrashmipatel829Apr 23, 2020

Thanks, I have one more issue.

I have a static image on my landing page but the text I want in that page needs to be responsive based on screen size. I tried to add the text but it doesn't appear inside the static image.

Thanks

SSemicolon WebSTAFFApr 23, 2020

Hello,

Please consider using the .section DIV to wrap your Text and set the Image as Background. Example:


	...

More examples can be found in the sections.html Template.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Rrashmipatel829Apr 23, 2020

works great!

one more issue, its probably simple but how do I get a border and change the width so it doesn't stretch the table to the page width?

See image.

Thanks

SSemicolon WebSTAFFApr 23, 2020

Hello,

  1. The Tables are used from Bootstrap, so you can consider checking out the Border Options available here: https://getbootstrap.com/docs/4.4/content/tables/ .

  2. You can place the Table inside the Bootstrap Grid: https://getbootstrap.com/docs/4.4/layout/grid/ or add the Table inside a DIV with a defined max-width CSS Property. Example:


	

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Rrashmipatel829Apr 24, 2020

So that works but the issue I am having is with the background image is when I view it on my phone the text overlaying on top of image doesn't shrink like image which causes the text to push other stuff down using this code:


	...

see image.

Is there a way to lock the text and as the screen size decreases the text will also adjust?

Thanks

Rrashmipatel829Apr 24, 2020

Also how do I decrease the spacing between my list and the __________ line in the image above?

SSemicolon WebSTAFFApr 25, 2020

Hello,

Unfortunately, the Image you are using is not completely optimized to be viewed on Mobile Devices. We recommend using the Responsive CSS Classes to change the Background Images according to the Devices:

.device-xl .section { background-image: url('image.jpg'); }

.device-lg .section { background-image: url('image.jpg'); }

.device-md .section { background-image: url('image.jpg'); }

.device-sm .section { background-image: url('image.jpg'); }

.device-xs .section { background-image: url('image.jpg'); }

This will definitely work fine. The Responsive Classes are as follows:

.device-xl – Class for Large Devices >=1200px

.device-lg – Class for Medium Devices >=992px to 1199px

.device-md – Class for Tablets

.device-sm – Class for Landscape Mobiles or Phablets.

.device-xs – Class for Portrait Mobiles

You can use the above code for other Elements as well in the Section like the Text or you can also decrease the Padding of the Section using these codes. Simply add your CSS Properties according to the Devices. Additionally, you can use the Spacing Utility Classes: https://getbootstrap.com/docs/4.4/utilities/spacing/ on the Element to decrease their Margins.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Rrashmipatel829Apr 29, 2020

I am trying to underline the hyperlink text, I have tried to remove the text-decoration line from code below and try to add target="_blank" but I cannot get it to put underline under text.

[AK](/forms/pdf/NBfrmRefAK.pdf)

SSemicolon WebSTAFFApr 30, 2020

Hello,

As mentioned earlier, unfortunately, we currently do not provide Customization related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy . You will need to manually code this or Hire a Freelancer to help you out with Custom Design Modifications.

You can consider using something like this:


[Demo](#)

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard