Title: Transparent taskbar Last modified: November 30, 2018 --- # Transparent taskbar * Resolved [naskox](https://wordpress.org/support/users/naskox/) * (@naskox) * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-taskbar/) * Hello, I am wondering is there a way to make the taskbar transparent on Neve? * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ftransparent-taskbar%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 15 replies - 1 through 15 (of 30 total) 1 [2](https://wordpress.org/support/topic/transparent-taskbar/page/2/?output_format=md) [→](https://wordpress.org/support/topic/transparent-taskbar/page/2/?output_format=md) * [AC](https://wordpress.org/support/users/purplecodes/) * (@purplecodes) * Themeisle Support * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-taskbar/#post-10934571) * Hi there, * By taskbar, do you mean the nav background here –>> [https://prnt.sc/lp0acx](https://prnt.sc/lp0acx) Or are you referring to something else? * Let us know so we can take a look. * Thread Starter [naskox](https://wordpress.org/support/users/naskox/) * (@naskox) * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-taskbar/#post-10934609) * Yes that’s is exactly what I want I don’t want it White, I want the image to be to the top of the page. But I want to keep the theme. * [AC](https://wordpress.org/support/users/purplecodes/) * (@purplecodes) * Themeisle Support * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-taskbar/#post-10935595) * You can add the following snippet from your Customizer > Additional CSS. * ``` .nv-navbar { background-color: gold; } ``` * Just change the color to your preferred one. * Let us know how it goes. * Thread Starter [naskox](https://wordpress.org/support/users/naskox/) * (@naskox) * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-taskbar/#post-10935664) * No, no I want it transparent so that the image is behind it, like this: * [http://prikachi.com/images/356/9450356w.png](http://prikachi.com/images/356/9450356w.png) * [AC](https://wordpress.org/support/users/purplecodes/) * (@purplecodes) * Themeisle Support * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-taskbar/#post-10939002) * [@naskox](https://wordpress.org/support/users/naskox/) * You need to change the background color to transparent. So on my snippet, instead of gold, you can use **rgba(255, 255, 255, 0)**. * The snippet then would look like this: * ``` .nv-navbar { background-color: rgba(255, 255, 255, 0); } ``` * Hope that helps. - This reply was modified 7 years, 6 months ago by [AC](https://wordpress.org/support/users/purplecodes/). * Thread Starter [naskox](https://wordpress.org/support/users/naskox/) * (@naskox) * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-taskbar/#post-10939053) * Well I added it, but seems it is not working, maybe I should try somethin in the Elementor? * [mwarbinek](https://wordpress.org/support/users/mwarbinek/) * (@mwarbinek) * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-taskbar/#post-10941291) * Using Custom CSS (Additional CSS) usually requires the “!important” qualifier to override the default CSS style sheet. * It will look like this, * .nv-navbar { background-color: rgba(255, 255, 255, 0) !important; } * Assuming she gave the correct selector name for it, you add the “!important” qualifier with a space after the rgba end bracket. * If that does not work, provide a URL to the page and I can locate the correct CSS selector. * _Note:_ Elementor, a page builder, does not modify the top main menu. It only provides element/content positioning and styling to the page itself. Styling of the main menu is controlled by CSS. Structure of the Main Menu is by HTML5 inserted by PHP. Access to styling the Main Menu by the user is with the Customizer, if the theme design provides it. Otherwise changing the styling falls to Custom CSS. - This reply was modified 7 years, 6 months ago by [mwarbinek](https://wordpress.org/support/users/mwarbinek/). Reason: added info - This reply was modified 7 years, 6 months ago by [mwarbinek](https://wordpress.org/support/users/mwarbinek/). Reason: More Info * Thread Starter [naskox](https://wordpress.org/support/users/naskox/) * (@naskox) * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-taskbar/#post-10941392) * Thank your both for your responses. @wpwd2016 Yes, I understand now the differences, I tried your customer css, but still no effect. The website is [http://www.workandtravelagency.bg](http://www.workandtravelagency.bg) Also even if I make it transperent will the image from the first section of the elementor go all the way up? Again I have attached a link with a photo with I want to do if it is possible with this theme of course. Thanks again. * [mwarbinek](https://wordpress.org/support/users/mwarbinek/) * (@mwarbinek) * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-taskbar/#post-10941782) * Ok, here we go. Please ensure you read everything here first. * Take a look at the screenhot of what I did using the developer mode of the browser: * [https://prnt.sc/lq3ft1](https://prnt.sc/lq3ft1) * (ignore the white border around the image at the lightshot site) * Next… * 1. Remove from your Custom CSS. * ``` .nv-navbar { background-color: rgba(255, 255, 255, 0) !important; } ``` * 2. Look in the Customizer for any settings for the top bar text/font color and for the top menu text/font color. If it has settings for them, change the color to white for both of them. – Also make the menu font larger to 16px which is Google’s requirement for mobile screens. For the top bar where it has your phone number, make that a larger font, about 13px or 14px. It still has to be a bit smaller than the menu font size. * If there are no settings for the text/font colors mentioned, then insert the following into the Custom CSS (copy it and paste), * ``` /*Top Bar & Nav Text*/ .nv-top-bar-content { color: #FFFFFF !important; } #nv-primary-navigation a { color: #FFFFFF !important; } ``` * 3. Next, copy the following CSS to your Custom CSS in Customizer, then read the notes after it. * ``` /*Top Wrapper Block*/ .wrapper::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.5); } .wrapper { background: transparent url('http://www.workandtravelagency.bg/wp-content/uploads/2018/11/action-america-architecture-378570.jpg') no-repeat 0 0; background-size: 100%; } .header { background-color: transparent !important; } /*Top Nav Bar*/ .nv-top-bar { background-color: transparent !important; } .nv-navbar { border-bottom: 0px solid #F0F0F0 !important; } /*Mobile Fix-Menu Toggle Button*/ @media screen and (max-width: 959px) { .navbar-toggle-wrapper { flex-wrap: wrap; } } ``` * **Notes:** 1. Above Custom CSS replaces the image, and removes the white color to the elements or blocks and made them transparent. * 2. The Elementor section where you used the large image, remove only the image, but – _For now, if possible, keep the overlay color that Elementor was using when you inserted the image, the overlay is the darkening of the image using a transparent opacity setting of the color black._. * If Elementor won’t keep the overlay color, don’t worry, just carry on. * The image is replaced above using Custom CSS. Elementor is not able to affect the HTML/Class named tags above and cannot do what the Custom CSS is doing. * 3. If the overlay color is inconsistent, such as parts darker than other parts, using the Custom CSS and using Elementor, then go back to Elementor where you inserted that image and remove the overlay. This should make the overlay consistent.( I made these steps because I am not in your WordPress to test things using Elementor and Custom CSS). * 4. The [@media](https://wordpress.org/support/users/media/) part of the Custom CSS is to fix the positioning of mobile menu button in the mobile screens. * 5. Redo your logo, it has to be a PNG using a transparent background. Else the white JPG background will make the appearance look like a pasting of an image like on paper. * **Final Note:** Well, that should do it. Please note, the image you used is 5088 px wide. That is huge and load time for that page may be really affected because of it. If that happens, then you have to edit the image down to 2600px wide and end up adjusting the page content in Elementor. - This reply was modified 7 years, 6 months ago by [mwarbinek](https://wordpress.org/support/users/mwarbinek/). Reason: added info - This reply was modified 7 years, 6 months ago by [mwarbinek](https://wordpress.org/support/users/mwarbinek/). Reason: corrected info * Thread Starter [naskox](https://wordpress.org/support/users/naskox/) * (@naskox) * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-taskbar/#post-10941888) * Well we have a huge success but still there is gray bar area which I still cannot understand how to remove, I uploaded new logo .png so that the white from the logo is removed, made the font 15 px. About the top bar don’t think about it, it is not important for the moment. You can take a look at the website now, I made everything as far as my knowledge is. So two issues, the one is The bar is stil gray, not transparent as in your picture and also it is visible on other pages, I would like if you know how to limit it being on the homepage /See Контакти for what I am talking about/ if you know how please help me. * PS: I removed the image from the first section in the Elementor /I kept only the gray scale of the image, like you said/ * PS2: As far as settings I don’t have much options for the navigation bar : here take a look [http://prikachi.com/images/399/9452399q.png](http://prikachi.com/images/399/9452399q.png). * PS3: How did you make it that so the page in which you are is underlined? In my version it is not now. * And finally enourmos thanks for the time and help 🙂 * Thread Starter [naskox](https://wordpress.org/support/users/naskox/) * (@naskox) * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-taskbar/#post-10941905) * Well also on the mobile phone the background we made with the CSS is not very proportionate, take a look: —> [http://prikachi.com/images/401/9452401b.png](http://prikachi.com/images/401/9452401b.png) * [mwarbinek](https://wordpress.org/support/users/mwarbinek/) * (@mwarbinek) * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-taskbar/#post-10942136) * I see, * **Grey Bar Background** At the following Custom CSS you entered, * ``` .nv-top-bar { background-color: transparent !important; } ``` * Replace this part “_background-color: transparent !important;_” with the following, ` background-color: rgba(255,255,255,0) !important;` * **Logo** Your choice, on the part that says “agency Bulgaria”, it has a black background. You can keep it that way or make that background part transparent too. * **Elementor Gray Section** Your choice, 1.Remove that Elementor section that has the gray overlay to make the overlay on the image using Custom CSS the same… or… 2. Keep that Elementor overlay, as it then creates a section of the front page that shows a subtle division between the menu and main title area. * **Navigation Font/Color Settings in Customizer** To test it, you have to remove the following from the Custom CSS and publish, * ``` /*Top Bar & Nav Text*/ .nv-top-bar-content { color: #FFFFFF !important; } #nv-primary-navigation a { color: #FFFFFF !important; } ``` * Once tested, if those font color settings do not work for the menu and top bar text to make the text white, then replace the Custom CSS that was removed and publish again. * **Underlined?** Not sure what you mean or refer to. The screenshot I uploaded does not have any underlining. Did you mean the menu item underlined when your on the page? * **Other pages without large background Image** To have the large background image removed from the other pages, you cannot, so long as the image is inserted using Custom CSS. This is why, * 1. The theme creates each page using the same main HTML structure tags as “wrapper”. Since we are inserting a background image into this “wrapper” tag, the image will show on all pages. * 2. The only way to change the way the other pages look is to go into the PHP files that make up the theme and find where the coding exists that builds the other pages and insert new HTML coding. This is a lot more work and not guaranteed to work well because it depends on how the theme was coded and also requires you then create a child theme to avoid updates changing it all back. * This brings us to only 2 options, * **Option 1:Change Image and Remove Others** 1. Make the image smaller and more useable for all pages. I have uploaded an example of the same image resized. Here is the link: * [https://prnt.sc/lq4z4y](https://prnt.sc/lq4z4y) * To get that image I uploaded and use it, “right click” the image and “save image as”, a “save-as” window opens, remove the “index.jpeg” and replace it with the following, * `action-america-architecture-378570.jpg` * …then save it in a different folder than the original folder else you over-write the original. The file has to be named exactly the same as the original. * In WordPress image/media library, delete the original image first, then upload the replacement. Then in the customizer preview window, click the home page link and it will refresh the page and image. * Next, remove all other header images from the other pages so only this single main image shows instead. * **Option 2: Return to Theme layout** This is where you have to check the customizer for any settings for the “body” background image, and if you can limit the body image to just the home page. If so, remove the Custom CSS entries “_wrapper_” and “_wrapper::before_“, including what is between the brackets `{ }`, then insert the image using the other part of the Customizer settings. * If not, then you won’t be able to do much except choose to return to the theme default layout if you don’t want the main image on all pages via the Custom CSS. Its unfortunate, but that is the way things are with WordPress themes, you can only do so much without re-writing the entire theme and its CSS. * **Mobile Logo** It would be much better to create a logo for mobile screens. This means the logo has to be less width. It won’t look good to make the text in the logo smaller, what I mean by smaller is recreate the logo to be different for mobile screens. Such as icon image in a circle, and the words “Work Travel” around the circle on top and “Bulgaria” at the bottom or visa-versa. * In fact, recreate a logo that looks good in both Desktop and mobile screens and when resized for mobile, it still looks good. - This reply was modified 7 years, 6 months ago by [mwarbinek](https://wordpress.org/support/users/mwarbinek/). Reason: added info - This reply was modified 7 years, 6 months ago by [mwarbinek](https://wordpress.org/support/users/mwarbinek/). Reason: added info * [mwarbinek](https://wordpress.org/support/users/mwarbinek/) * (@mwarbinek) * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-taskbar/#post-10942198) * If you are going to keep the Custom CSS image insertion as suggested, then you also need to add this to the Custom CSS, * ``` /*Mobile Menu Button */ .icon-bar { background: #FFFFFF !important; } ``` * If you choose to return to the default theme layout, then don’t worry about this. - This reply was modified 7 years, 6 months ago by [mwarbinek](https://wordpress.org/support/users/mwarbinek/). Reason: corrected info * Thread Starter [naskox](https://wordpress.org/support/users/naskox/) * (@naskox) * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-taskbar/#post-10942224) * Thanks for the additional info but still cannot make the gray bar background dissappear: * ``` /*Top Wrapper Block*/ .wrapper::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0, 0, 0.5); } .wrapper { background: transparent url('http://www.workandtravelagency.bg/wp-content/uploads/2018/11/action-america-architecture-378570.jpg') no-repeat 0 0; background-size: 100%; } .header { background-color: rgba(255,255,255,0) !important; } /*Top Nav Bar*/ .nv-top-bar { background-color: rgba(255,255,255,0) !important; } .nv-navbar { border-bottom: 0px solid #F0F0F0 !important; } /*Mobile Fix-Menu Toggle Button*/ @media screen and (max-width: 959px) { .navbar-toggle-wrapper { flex-wrap: wrap; } } ``` * ALso I do not want to make the mobile logo smaller, it is just that the background we insert is too wide or should I see to short to fill the Portait mode on the phone. But lets first make the bar really transparant, because I can’t seem to do it properly… * .nv-top bar is the TOP bar which is already transparant, the problem is with the Main navigation bar. * [mwarbinek](https://wordpress.org/support/users/mwarbinek/) * (@mwarbinek) * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-taskbar/#post-10942266) * Sorry, getting tired, was up all night. I am in North America. * **Grey Bar background** At this Custom CSS entry, * ``` .nv-navbar { border-bottom: 0px solid #F0F0F0 !important; } ``` * …add in the following, * `background-color: rgba(255,255,255,0) !important;` * …so it looks like this, * ``` .nv-navbar { border-bottom: 0px solid #F0F0F0 !important; background-color: rgba(255,255,255,0) !important; } ``` * The other changes to the background color are fine, leave them as is. * **Image in Mobile Screen** Add the following, * ``` /*Mobile Header Image*/ @media screen and (max-width: 1402px) { .wrapper { background-size: cover; } } ``` * **Note**: this is where testing will tell us if any of these changes work. This is the problem here where I am working from outside your WordPress site and cannot do the testing myself to see what needs doing and doing differently. - This reply was modified 7 years, 6 months ago by [mwarbinek](https://wordpress.org/support/users/mwarbinek/). Reason: corrected info Viewing 15 replies - 1 through 15 (of 30 total) 1 [2](https://wordpress.org/support/topic/transparent-taskbar/page/2/?output_format=md) [→](https://wordpress.org/support/topic/transparent-taskbar/page/2/?output_format=md) The topic ‘Transparent taskbar’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/neve/4.2.4/screenshot.png) * Neve * [Support Threads](https://wordpress.org/support/theme/neve/) * [Active Topics](https://wordpress.org/support/theme/neve/active/) * [Unresolved Topics](https://wordpress.org/support/theme/neve/unresolved/) * [Reviews](https://wordpress.org/support/theme/neve/reviews/) * 30 replies * 4 participants * Last reply from: [mati](https://wordpress.org/support/users/matildedesign/) * Last activity: [7 years, 3 months ago](https://wordpress.org/support/topic/transparent-taskbar/page/2/#post-11251634) * Status: resolved