Transparent drop down menu color

[dekoningalex]

Hi,

I started changing my site from the bronx theme to this theme because i needed more buddypress options for my site. I’ve run into several issues trying to get things to work my way.

1. I want to use a transparent menu throughout the site, and this works. Yet, the dropdown menu is now also transparent and black. When i remove the transparency of the header, the color of the dropdown menu is white again, just the way i like it. Why can’t i customise the colors for the dropdown menus the way i want them to be? That i want my menu to be transparent within the header, doesn’t necessarily mean i want the dropdown menu to be black and transparent.

2. The products show all categories in the product list. These are way too many categories and take way too much space, how do i hide the product categories from the product lists?

3. My old theme had a visual composer product description option, yet this theme doesn’t. This means that i have over 500 products that have a page-like description which doesn’t look good on your theme. Is there a way to remove all product descriptions from all products, so i don’t have to remove them individually.

That is it for now =)

Thanks in advance.

[dekoningalex]

Issue 2 is resolved. 1+3 are yet not. I have one more question. I would like to have the register page as the home landing page just like the demo: https://seventhqueen.com/themes/kleo/home-register/ I moved from another theme so i couldnt upload demo content. How can i recreate or import just the home register page as it is in the demo? And, is it possible to have a revolution slider background instead of an image on it?

Thanks in advance

[dekoningalex]

While i have waited 2 days for a response, might as well give my other issues as well. Iv’e tried to find a snippet in the forums but couldn’t get it worked out. I want to increase the size of my logo and give it a larger top margin. However, the top margin i tried to add with css also counts for the sticky logo, which makes it so that the logo is under the sticky header, which should not be the case. How can i increase the size of my logo and put it lower without messing up my menu/sticky header menu? Furthermore, at the profile pages the buttons for show less show more/and change cover image are awkardly positioned at the top, and cannot be used, which also needs a fix. See screenshot. Lastly, in the profile information iv’e got a myCred part added, but i can’t get it to align like the rest of the profile information (see screenshot)

Thanks in advance!

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, sorry for the delay, will check each issue and try to resolve it as soon as possible.
For the logo size, add this to style.css of child theme and edit it as you wish 🙂

COPY CODE

img#logo_img {
    max-height: 300px !important;
    width: 400px;
}
.logo {
    top: 10px;
}

For the sticky logo

COPY CODE

.header-scrolled .logo {
    width: 198px !important;
    top: 0px !important;
}
.header-scrolled .logo img {
    height: 58px !important;
}

Toggle profile header button

COPY CODE

span.toggle-header {
    top: 25% !important;
}

About mycred, how do you want it to look like?

Hide products categories at single product page

COPY CODE

span.posted_in {
    display: none !important;
}

Sadly i do not know a way to remove the product description of your old theme
Let me know if you need anything else 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[dekoningalex]

Hi,

Thank you for the codes, they worked good although they created some additional issues.

First of all, the resizing of the logo causes the main menu items to be moved somewhat to the right which causes it to not be in the absolute center anymore. Furthermore, the profile button “show less/more” is now fixed when i put it to 50%. Yet, the left button to upload a new cover photo is still in the same position at the top and unclickable, how can i get that one to 50% as well?

One more question, as i use a transparant header the cover pictures of the profile page might make the menu items hard to see. Therefore, i’ve added drop shadow to the menu items and this works good. Yet, the drop shadow also applies to the drowndown menu for the text on the notifications, shopping cart and the search function. How can i remove the dropshadow from the text of these functions, but keep it for the menu items? (see screenshot)

Thanks in advance!

Attachments:

You must be logged in to view attached files.

[dekoningalex]

I managed to find the css for the button that can quickly change the cover photo and fixed it on the profile page, so i don’t need help with that anymore.

The most important things about the site right now is that i want to be able to style the primary header menu, do you suggest some kind of plugin for this like ubermenu? Because, i would also like to add a background picture to mega menus, which my older theme had build in.

Furthermore, i really need the register landing page demo/template on my site asap, is there a way to do it quickly without having to rebuild the entire register page?

Thanks!

[Laura]

Hello, Ubermenu works fine, it might have some issues with login modal, but if you want to use it it’s the best for that.
Well, for register page, you can use visual composer and just add a couple rows with backgrounds,text and the register form.
Buddypress registration page is dynamic, so you just need to select it at Settings > Buddypress > Pages in order to appear

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[dekoningalex]

This reply has been set as private.

[Laura]

Hello, at Pages you will see Home Register, that is the register landing page demo, for buddypress, you cant edit that page, as its created dynamically with php, so you need to edit the php file with the help of a developer
The file is kleo/buddypress/members/register.php
But edit it at the child theme ( copy the folder names and paste the file inside )

For the menu, try moving it using

COPY CODE

ul#menu-main-menu {
    margin-left: -10% !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[dekoningalex]

Hi Laura,

Thank you so much for adding the register premade page.

The code for the menu worked, only it merely moved the problem to the sticky header, as this is now not in the middle anymore. (see screenshots).

The home register page is great, i thought it was actually a php rebuild of the original buddypress register page, and that the original register would get overwritten if you download the demo files. I have one question about the page though. Is it somehow possible to have a Revolution slider as background instead of a background image? That would be perfect.

Thanks in advance!

Attachments:

You must be logged in to view attached files.

[dekoningalex]

This reply has been set as private.

[dekoningalex]

So,

I succeeded in making the menu work on the desktop version. (Don’t ask me how i did it, but i did). Now, the mobile version is still messed up and really gonna need some help with that though…

Thanks in advance!

[dekoningalex]

I hope you find time soon to respond to this, because the register page is down because of it. I tried to change the string “Your full name” in kleo_register.php to “Pokespot Nickname”, but the page immediately turned completely blank. I tried to change it back to “Your full name” and it still remained blank even though the file is exactly the same as it was before. How is this even possible and how can i fix this?

[dekoningalex]

Never mind about the register form problem, i fixed it.

[Laura]

Hello, glad you could fix it 🙂
Please let me know how do you want the mobile menu to look and i will give you the proper css code 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[dekoningalex]

This reply has been set as private.

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Radu]

Hi,

Please add this css rule to wp-admin -> theme options -> general settings -> quick css

COPY CODE

@media(max-width:991px){
a.ubermenu-responsive-toggle.ubermenu-loc-primary {
    margin: 20px 0;
    padding: 20px;
}
}

Let me know

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[dekoningalex]

What exactly is that code supposed to do? It only gave the ubermenu bar some padding beneath. The secondary menu is still hidden under the logo and the sticky mobile menu is still stuck.

[Radu]

Hi,
The previous CSS code it’s stylized a little the mobile on mobile, but I’ve misunderstood, the uber menu works as it should using the only one menu I’ve tried a workaround for your website ubermanu and two menus and it’s not enough.

For that should be made some investigations, for the moment we don’t have a quick solution

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[dekoningalex]

I understand, quite unfortunate as i have no choice but to give a bad review if you can’t even help me get a menu to work, that you by all means recommended to me.

[Radu]

Hi again,

I understand your point of view, you are right.

Please attach in a private reply your current version of ubermenu so wen can test the behavior using two menus locally.

Sorry for the bad experience, we try to make every client happy.

Here are the CSS selectors that helps you to achieve the submenu background white and links color black and also the border a gray color.

COPY CODE

@media (min-width: 992px) {

.navbar-transparent .navbar-nav > li > .dropdown-menu, .navbar-transparent .navbar-nav > li > .dropdown-menu .dropdown-menu {
    background: #fff !important;
    }

.navbar-transparent .navbar-nav > li > .dropdown-menu li, .navbar-transparent .navbar-nav > li > .dropdown-menu .dropdown-menu li {
    border-bottom-color: #dddddd !important;
    }

    .navbar-transparent .navbar-nav .dropdown-menu li a {
        color: #333 !important;
    }
}
@media (max-width: 992px) {
    .navbar-transparent .navbar-nav > li > .dropdown-menu, .navbar-transparent .navbar-nav > li > .dropdown-menu .dropdown-menu {
        background: initial !important;
    }

    .navbar-transparent .navbar-nav .dropdown-menu li a {
        color: #FFF !important;
     }
}

You can copy the CSS directly from here : https://gist.githubusercontent.com/sqcodes/41718c9612c728a78776f7174c677d3c/raw/5071dbb999c28a90ee62c61dcfc8b5c86d39b087/.css

And the submenu will look like this

I hope you will change your mind on our support and rating after we solve this kind of issue, maybe this makes you happy.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[dekoningalex]

Hi,

I use the latest version of ubermenu, i update instantly.

Those codes would have been very helpful before i bought Ubermenu, now not so much.

I don’t necessarily need a secondary menu, but i do want the buddypress notifications and profile image in the menu as it is now. If there is some way to implement the current secondary menu items into the ubermenu (primary) and keep them as they are now, i am fine with that solution as well. Please also take a look at the sticky menu to both the desktop version and mobile. It doesn’t resize anymore on the desktop, and doesn’t work at all on the mobile version.

If this isn’t a solution, please advice me to what the best option is to have a decent menu working for both the mobile and the desktop version.

Thanks

[Radu]

Hi,

Sorry for the delayed response, having some health issues…

I recommend you to use our default menu + the CSS that I have provided to you and to ask for a refund from Ubermenu support service.
If my solution works for your needs.

Let me know
Sorry for the situation
Best Regards
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[dekoningalex]

This reply has been set as private.

[Radu]

Hi,

Load those CSS s into child theme style.css and check how it looks on mobile and also on desktop

From my point of view it’s ok let me know

COPY CODE

@media (max-width: 991px) {
.kleo-main-header .navbar-collapse.collapse {
    display: block !important;
}


a.ubermenu-responsive-toggle.ubermenu-loc-primary {
    margin-top: 45px !important;
}

}
#header .navbar-nav .dropdown-menu li a {
    color: #fff !important;
}

.header-lp.kleo-main-header .secondary-menu .navbar-nav {
    	text-align: left;
    	margin-top: 0px !important;
}


.ubermenu.ubermenu-main {float:left !important; margin:0 !important;padding: 0 auto !important }

.kleo-main-header .navbar-nav > li > a {
    line-height: 140px !important;
}

div#undefined-sticky-wrapper .container {
    margin: 0 !important;
    padding: 0 !important;
}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[dekoningalex]

This reply has been set as private.

[Radu]

Hi,

Kleo by default doesn’t use fixed menu for mobile devices

This is how I see your website header on mobile ( see attached )

Let me know how can I reproduce the logo issue

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

Attachments:

You must be logged in to view attached files.

[dekoningalex]

Hi Radu,

I will adjust my review accordingly. There is one more issue however. My site has a lot of content which is causing an issue in the ajaxified search tool. If one searches, there is a list of results but no way to scroll within those results. Therefore, some search results are not visible and can’t be accessed (see screenshot). Could you add a scroll function to the ajax search function?

THe logo issue occurs on mobile when you are logged in as a normal user and scroll down.

Thanks in advance.

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

Please add this css

COPY CODE

.kleo_ajax_results {
    overflow-y: scroll !important;
    max-height: 700px !important;
}

The CSS will be added to wp-admin -> theme options -> general settings -> quick CSS

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[dekoningalex]

Hi,

I’ve been trying to reduce the size of forum images or completely hide them. When i use the css to hide it it works, but the blog pictures are also hidden, which i don’t want. How can i hide the forum featured images only without affecting the blog ones? (see screenshots).

Thanks in advance.

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,
By using a specific body class for forums by let me know the page url where i can see this page with this kind of image size : https://cdn.seventhqueen.com/sq-support/wp-content/uploads/2017/03/Screen-Shot-2017-03-26-at-14.25.26.png

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[dekoningalex]

Hi,

ALl forum pages have this..

http://www.poke-spot.com/forums/forum/value-discussion/

[Radu]

You can decrease the image size on forums using this css

COPY CODE

.forum article img.attachment-kleo-full-width {
    max-width: 100px;
    margin: 0 auto;
    text-align: center;
}

If you want to hide image use this CSS

COPY CODE

.forum article img.attachment-kleo-full-width {
display:none;
}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[dekoningalex]

Hi Radu,

How are you doing?

I’ve been trying to increase the avatar size somewhat within the forums. I managed to do this, however i can’t seem to center align it to the way it was (see screenshot). I’ve tried loads of css but nothing seems to work.

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

Fine thanks, you ?

Here it’s your CSS

COPY CODE

#bbpress-forums div.bbp-forum-author .bbp-author-avatar, #bbpress-forums div.bbp-reply-author .bbp-author-avatar, #bbpress-forums div.bbp-topic-author .bbp-author-avatar {
    float: left;
    text-align: center;
    margin: 0 auto;
}

The CSS will be added to wp-admin -> theme options -> general settings -> quick CSS

NOTE : Child theme needs to be installed and activated.

Have a nice weekend
Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[dekoningalex]

Hi Radu,

I’ve noticed a small issue with the mobile version of the site. You created a buddypress menu for me on the mobile version, which looks great. However, once the ubermenu is opened, the menu is underneath the search bar, which makes it impossible to click on some buttons in the menu. Is there a way to push the searchbar underneath the ubermenu when it opens? Or maybe an easier way is to bring the ubermenu to the front and the search menu to the back.

Thanks in advance.

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,
use this CSS

COPY CODE

ul.ubermenu-submenu {
    position: initial !important;
}

The search will be below the expanded submenu

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[dekoningalex]

Hi Radu,

This solved the issue for the normal submenus. However, the large submenus still have the search bar and login menu on top of them (see screenshots).

Attachments:

You must be logged in to view attached files.

[dekoningalex]

It also ruined the desktop version (see screenshot), so i had to revert the changes.

Attachments:

You must be logged in to view attached files.

[Author]

Posts