Fix Navigation Button on mobile view

cmalley143

Hi, I need my navigation button to look the same as the demo version of JA University. See attached.

How can I do this?

aman204

cmalley143 Hi

Can you add your admin and ftp details in edit fields in order for us to take closer look.

For reference, You can follow thread post (5 point) procedure.

cmalley143

Fields updated

cmalley143

You may need to us a US vpn service to get into the back end. This is easier than adjusting Securi and your support has used this method before.

aman204

cmalley143 Hi

Sorry but I am not familiar with the specific process. You may kindly ask your hosting provider to provide easy-to-access ftp access details to enter in ftp client, which you can share in edit fields in order to troubleshoot closely for relative query

Or, You may let me know the forum thread where you had provided similar access for team member to access enabling me to communicate with him to know about the exact process

cmalley143

I do not understand. I provided ftp detals.

aman204

cmalley143 I do not understand. I provided ftp detals.

Apologizes as there had been some misunderstanding as had to refer to admin backend.

Had been able to access ftp however kindly confirm the exact directory where the files/folders for the specific site in question reside ?

You may whitelist my I.P - 103.235.167.171 Country- India enabling to access admin backend

cmalley143

/usr/www/users/emsonli/nhcprv2

I have also unblocked your country.

aman204

cmalley143 You may check now. Ref: Screenshot. Had to make the specific code right as per default stage in /templates/ja_university_t3/tpls/blocks/mainnav.php

Kindly ensure to clear your browser cache if changes dont reflect.

For getting the appearence to be seen right as seen on demo site for specific element, You may either remove the CSS (marked in screenshot) from custom.css file or adjust padding-right value accordingly

cmalley143

Thank you for taking a look at it. It still does not look like the template on this site.

Can it be changed so it says navigation and is centered?

aman204

cmalley143 It still does not look like the template on this site.

The specific elements in responsive mode as apparently seen have got bit of makeover with latest template version releases to show the toggle which is is more intuitive and adapt well with smaller screens

Have added some CSS in custom.css file to derive the similar appearence as seen on demo site

Kindly ensure to clear your browser cache if changes dont reflect.

cmalley143

Thanks,

Can you center the word Navigation and remove the gray menu icon on the left of the search button?

aman204

cmalley143 Can you center the word Navigation and remove the gray menu icon on the left of the search button?

You may kindly view the screenshot where the added CSS is being appended and deriving the result as envisaged. Regarding the other grey menu icon, Have added the media query CSS in specific file -/templates/ja_university_t3/local/css/custom.css however the same isnt appending.

@media only screen and (max-width: 600px){
  .languageswitcherload .navbar-toggle
  {display:none;}
}

Kindly try to clear your browser cache if changes arent reflecting

Also, some of the other fixes from previous posts are now broken. The shopping cart drop down is hidden by the black menu. The search box is now rounded and the black menu bar is now rounded.

It could be due to custom.css file from isolated local folder applying now henceforth, the CSS from /templates/ja_university_t3/css/custom.css isnt applying

You can copy CSS wholly from the above recent file and paste in/templates/ja_university_t3/local/css/custom.css enabling additional CSS to apply

cmalley143

Also, some of the other fixes from previous posts are now broken. The shopping cart drop down is hidden by the black menu. The search box is now rounded and the black menu bar is now rounded.

cmalley143

See this thread....

https://www.joomlart.com/forums/d/22481-allignment-issues-after-creating-custom-css

aman204

cmalley143 Hi

As suggested quoting the relative issue, Kindly apply the suggestion which is being mentioned again for reference :

You can copy CSS wholly from file - /templates/ja_university_t3/css/custom.css and paste in/templates/ja_university_t3/local/css/custom.css enabling additional CSS to apply

cmalley143

Thank you. The previous fixes are now applied.

I do not understand what changed you want me to make to center the NAVIGATION text.

saguaros

cmalley143
Hi,

As I can see that you set the padding for the Navigation button in 'custom.css' file, line 27

.navbar-default .navbar-toggle {
    padding-right: 86px;
  float:none !important;
}

Kindly check in which screen size you use this css rule for and try to use Media Queries to add this style to associated resolution screen.

Regards

cmalley143

I do not understand. I am not a technical person. What lines do I need to change?

Ninja

cmalley143
Hi
This code

.navbar-default .navbar-toggle {
    padding-right: 86px;
  float:none !important;
}

Its working on all screen size.
if you want this code to work on mobile device only replace it with

@media(max-width:468px){.navbar-default .navbar-toggle {
    padding-right: 86px;
  float:none !important;
}}

So it will not apply changes on the other views.