1. Shopin
  2. Saturday, 13 July 2019
Hello

I have a css issue and problem with menu in template,
Joomla 3.9.10
Shopin template
Helix3 - 2.5.6

Template editor - Layout header row set to 1,11 columns ie: 1 for logo 11 for menu but menu didn't appear on 1 line. so added the css below which fixes the menu problem in desktop view but displays wrong in mobile view. I had pages loading with 2 scroll bars so added css for that but now some pages shake. Also the page is set to boxed layout but the margins or padding on the sides are to large I dont know where to set page width. i think its something to do with this sppb-row-container

Here's the css. (custom.css)
.layout-boxed .body-innerwrapper #sp-header #sp-menu {
width: 91% !important;
}
.body-innerwrapper {overflow-x: initial !important; }
body.view-registration,
body.view-login,
body.view-reset,
body.view-remind {
background-image: url(images/page.jpg);
}
#sp-main-body {
padding: 40px 0;
}
#sp-header {
height: 71px;
}

and in sppagebuilder.css
.sppb-row-container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 768px) {
.sppb-row-container {
width: 750px;
}
}
@media (min-width: 992px) {
.sppb-row-container {
width: 970px;
}
}
@media (min-width: 1200px) {
.sppb-row-container {
width: 1170px;
}
}
this is url http://baysideoutrigger.com.au/

any help would be great.

Thanks regards Mark
Accepted Answer
Hi,
Thanks for your query. Please remove all the css from your custom css and use this css there and check. I think this will solve the issue regarding your header.


.layout-boxed .body-innerwrapper #sp-header #sp-logo {
width: 10%;
}
.layout-boxed .body-innerwrapper #sp-header #sp-menu {
width: 90%;
}

@media only screen and (max-width: 990px) {
#sp-header {
width: 1240px;
}
}


Note: Please take a backup of your previous css. In case you need them again.


-Best Regards
  1. more than a month ago
  2. Shopin
  3. # Permalink
Responses (3)
Hi,
Thanks for your query. Please remove all the css from your custom css and use this css there and check. I think this will solve the issue regarding your header.


.layout-boxed .body-innerwrapper #sp-header #sp-logo {
width: 10%;
}
.layout-boxed .body-innerwrapper #sp-header #sp-menu {
width: 90%;
}

@media only screen and (max-width: 990px) {
#sp-header {
width: 1240px;
}
}


Note: Please take a backup of your previous css. In case you need them again.


-Best Regards


Hello Sifat thanks for your reply, I have made the change as directed but the scroll bar returned and the logo in responsive mode was very small, I have added your code and this which seems to work is this code OK.


.body-innerwrapper {overflow-x: initial !important; }
.layout-boxed .body-innerwrapper #sp-header #sp-logo {
width: 10%;
}
.layout-boxed .body-innerwrapper #sp-header #sp-menu {
width: 90%;
}

@media only screen and (max-width: 990px) {
#sp-header {
width: 1240px;
}
}
@media screen and (min-width: 320px) and (max-width: 767px) {
.layout-boxed .body-innerwrapper #sp-header #sp-logo {
width: 20%;
}
.layout-boxed .body-innerwrapper #sp-header #sp-menu {
width: 80%;
}
}


thanks again regards Mark
  1. more than a month ago
  2. Shopin
  3. # 1
Good to know your issue is solved.

-Best Regards
  1. more than a month ago
  2. Shopin
  3. # 2


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.