Docs

[venya]

Hello Themeco!

Happy Friday!

I’ve been trying to make some style changes to the mobile menu and could really use some help… These questions are all for mobile version…

1. How can I raise the position of the menu button?

2. How do I make the width of the menu full screen?

3 Remove white space before the submenu items.

4. Submenu is indented, how can I make it full width as well?

5. I would like to remove the background fill color for Search button, and instead have a transparent button with black border and font color.

5b. Remove the background color from cart button.

6. How do change the font color of the active page?

7. Change the font color of an active menu item, when submenu is expanded (i.e. in photo, the world “Multimedia” ( would this be the same as #6, or be seperate css?)

Getting closer to finishing the site. Thank you for your assistance with this.

[venya]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

1. Please add this CSS to Admin > Appearance > Customizer > Custom > CSS

.x-btn-navbar {
    position: relative;
    top: -20px;
}

2. This too,

@media ( max-width: 979px ) {
.x-navbar-inner > .x-container {
width: 100%;
}
}

3. Please add this too,

@media ( max-width: 979px ) {
.x-navbar .sub-menu {
top: 0px!important;
position: static!important;
}
}

4. and this

.x-navbar .mobile .x-nav ul {
    margin: 0 !important;
}

5. this too

.x-navbar .mobile .x-nav>li.x-menu-item-woocommerce>a {
    background: transparent !important;
}
.x-navbar .mobile .x-nav>li>a.x-btn-navbar-search {
    background: transparent !important;
    color:#000 !important;
-webkit-box-shadow:inset 0 0 0 3px rgba(0,0,0,1);
box-shadow:inset 0 0 0 3px rgba(0,0,0,1);
}

6. this too,

 .x-navbar .x-nav-wrap.mobile .x-nav > li.current-menu-item > a,
  .x-navbar .x-nav-wrap.mobile .x-nav > li.current_page_item > a,
  .x-navbar .x-nav-wrap.mobile .x-nav > li.x-active > a{
  background:red !important;
  }

7. Added to #6 which is the .x-active

Hope these helps.

[venya]

Hello,

This was fantastic! Amazing! Thank you.

I’ve been having quite a few problems where fixing one thing will break another. I’ve spent many hours this weekend trying to sort things out, and am left with a few I hope you can help with.

1. Portfolio category archive pages – In mobile view, the post titles are missing.
For example on:
http://www.bennyfromtheblock.com/multimedia-category/liberty-now/

2. I’m struggling with keeping my page title uniform. I like the size and position of the page title in show shop and would like other page titles to look the same (in terms of position and fontsize)
Good: http://www.bennyfromtheblock.com/product-category/new-arrivals/

I need to fix them for portfolio pages, and portfolio archive view:

Portfolio list pages
http://www.bennyfromtheblock.com/multimedia-portfolio/liberty-now/

Portfolio archive view list pages
http://www.bennyfromtheblock.com/multimedia-category/liberty-now/

3. Product search. When doing a woocommerce product search on mobile, I have a white box along the right and bottom of products. (see photo) I don’t have this when doing a search from main nav bar search. I would like to remove the extra white space… For example:

http://www.bennyfromtheblock.com/?s=moscow&post_type=product

4. Also in #3 for desktop view, I’d want to remove the entry-wrap and just leave the product image, without product titles, descriptions, etc.

5. Been trying to make my mobile sub-menu Caps… I tried inserting the text-transform:capitalize code into code already modifying the subtitle, but couldn’t get it to work.

6. Mobile Navbar – How do I have the mobile menu open up at a higher position on the screen? I’d like for all menu items to be visible down to the last item (cart).

7. (Likely to help with #6) – I would like to also reduce the height of the mobile white navbar – there’s too much white space below the logo…

Thanks again!

[Christopher]

Hi there,

#1 Please find and remove this code :

@media (max-width: 979px){
.tax-portfolio-category .entry-wrap >header {
    display: none;
}
}

#2 Find this code :

.archive.woocommerce h1.h-landmark {
    text-align: left;
    padding-left: 25%;
}

And update it to :

h1.h-landmark {
    text-align: left;
    padding-left: 25%;
}

#3 Find and remove this code :

@media (max-width: 500px){
.search-results .entry-featured {
    width: 90%!important;
    margin-bottom: 5px;
}
}

#4 Add this code :

.search .entry-wrap {
    display: none;
}

#5 Find this code :

@media (max-width: 979px){
.sub-menu span {
    display: block!important;
    color: white!important;
    margin-left: 0!important;
    font-size: 15px;
    font-weight: normal;
    font-family: "Helvetica Neue",Helvetica,sans-serif;
    border: none!important;
    border: 0!important;
}
}

And update it to :

@media (max-width: 979px){
.sub-menu span {
    display: block!important;
    color: white!important;
    margin-left: 0!important;
    font-size: 15px;
    font-weight: normal;
    font-family: "Helvetica Neue",Helvetica,sans-serif;
    border: none!important;
    border: 0!important;
    text-transform: uppercase;
}
}

#6 Update this code :

/* MOBILE MENU TESTING 5/12  on right track */
.x-navbar .x-nav-wrap.mobile .x-nav > li > a {
  border:none!important;
  color:white!important;
  Background:#0053AD!important;
  font-size: 16px!important;
  text-align:center;
  line-height: 1;
  padding: 15px 0;
}

To :

/* MOBILE MENU TESTING 5/12  on right track */
.x-navbar .x-nav-wrap.mobile .x-nav > li > a {
  border:none!important;
  color:white!important;
  Background:#0053AD!important;
  font-size: 16px!important;
  text-align:center;
  line-height: 1;
  padding: 5px 0;
}

Add this as well :

.x-navbar .mobile .x-nav li>a {
    padding: 5px 0;
}

#7 Add this :

@media (max-width:480px){
.x-navbar .x-brand {
    margin-bottom: 0;
    margin-top: 15px;
}
}

Hope it helps.

[venya]

This reply has been marked as private.

[Lely]

Hi Ben,

For #3 please try to add the following code:

.search-results.woocommerce .entry-featured {
    width: 100% !important;
    margin-bottom: 0 !important;
}

Below this part:

@media (max-width:500px){ 
/* SEARCH MOBILE 2x2 GOOD +++ */
  .search-results .entry-featured {
width:90%!important;
margin-bottom:5px;
}

For #7, Please update this code:

.x-btn-navbar {
    position: relative;
    top: -100px!important;
}

To this:

.x-btn-navbar {
    position: relative;
    margin-top: -100px!important;
}

#8 Please also add this:

.x-pagination, .x-sidebar.left {
    clear: left;
}

Above CSS will clear the left float position.

#9. That is possible via some custom codes, unfortunately it is outside the scope of our support. That needs some custom query for the search page.

#10. Please try this CSS instead:

.page-template-template-layout-portfolio .entry-thumb {
  background-color: transparent;
}

#11 Please clarify which part.

Hope this helps.

[venya]

#3. The code fixed regular search, but for product search via the sidebar, I’m still getting a white but over the product images (on mobile AND desktop…) The white rectangle is actually cutting off the bottom….not in addition to the image..

#7 worked great!

#8 Worked great.

#9 Ok. Thanks.

#10. I was about to use the code you sent, and saw that this problem solved itself. I’m baffled! I’ve had this issue for months now and it must have been solved by some of the other new code you suggested.

#11 – I would like it on the Multimedia part of the home page. It’s labeled as such and has 5 videos. Thats where I’d like to utilize the same hover effect as in portfolio gallery.

Thank you.

[Christopher]

Hi there,

#3 Please add this :

.search-results.woocommerce li.product .entry-featured {
    margin-bottom: 0;
    border-bottom: 0;
}

#11 Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[venya]

Thanks!
#3 was fixed when I added !important. Finally! 🙂

#11. Sorry if I was unclear. My portfolio page has a hover effect over the image thumbnails on larger screens.

http://www.bennyfromtheblock.com/multimedia-portfolio/

I have 5 portfolio posts on the home page as recent posts (see photo). I wanted to apply the same hover effect to those 5 videos as well.

Thank you!

[Lely]

Hi There,

#11 Please also add this CSS:

#x-section-6 .x-recent-posts .x-recent-posts-img:hover {
    -ms-transform: scale(1.1) rotate(0.0deg);
    -webkit-transform: scale(1.1) rotate(0.0deg);
    transform: scale(1.1) rotate(0.0deg);
}
#x-section-6 .x-recent-posts .x-recent-posts-img {
   transition: all 0.7s ease-in-out;
}

Hope this helps.

[venya]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for updating. It seems you have the following code in your Child Theme’s CSS that’s causing this :

.woocommerce li.product .entry-featured, .woocommerce-page li.product .entry-featured {
  max-height: 365px;
  overflow: hidden;
}

Kindly remove this to get expected result. When you add any custom code to your site, make sure you know what you are doing to avoid potential conflicts.

Hope this makes sense.

Cheers!

[venya]

That worked! Thank you again for the great help!

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts