Add Image to Topbar

[weatherstone]

Hello,

I am developing a site for a client: http://wordpress-85748-402880.cloudwaysapps.com. Should I add this image (http://wordpress-85748-402880.cloudwaysapps.com/wp-content/uploads/2018/01/Quality-Floor-Maintenance-and-Cleaning-Header.jpg) as a single slide or just throw it in the topbar? If I should put in the topbar, can you provide the code?

Thank you,
J

[christopher]

Hi there,

I suggest that you add it as a one slide revolution slider and use the page Above/Below masthead functionality to add it above or below the menu.

For more information:

Slider Revolution | Themeco Docs

Append Sliders to Your Header | Themeco Docs

Thank you.

[weatherstone]

Thank you for your response. Unfortunately, the slide seems to be blowing up beyond its size. Do you have any recommendations?

Furthermore, the “boxed site” feature doesn’t seem to be working as I cannot adjust the box dimensions to allow for a larger margin on the left and right.

[christian]

Your background size is set to cover. Set it to contain.

You can learn more options from Slider Revolution’s Documentation.

Regarding the Box layout, go to Appearance > Theme Options > Layout and Design and adjust the Site Max Width and Site Width. Please use a full HD monitor because if you’re in a laptop with small screen, you won’t see results if the Site Max Width is greater than the width of your screen.

Thanks.

[weatherstone]

I followed your instructions for the slider, but notice it still looks terrible on every device as the sides are getting cut off. Also, there is an icon which appears while the slider is loading. Is there a way to remove that? The original (outdated) custom development website I am moving to X in WordPress does not seem to have those issues: quality-floors.net. Can you please advise?

I tried looking at the site on a 12 in screen as I do not have access to a full HD monitor right now as I am traveling. I’m still not sure it is working quite right: https://prnt.sc/i0ehwr.

Thank you for your very thorough response before,
J

[ruenel]

Hello There,

Thanks for updating in! To resolve your issue, you must insert the image as a background image for you slide. Please check the documentation for further details.
https://www.themepunch.com/revslider-doc/main-background/

And perhaps this video tutorials could help you:

Please let us know how it goes.

[hestiastadservice]

Hi
I have a issue with my top bar, when it`s fixed the slide windows gets smaller and some information in the slider windoe dissapeares.

I am using this css code

header.masthead.masthead-inline {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 2000;
}

can somebody help with my issue

[ruenel]

Hello There,

Thanks for updating this thread. Your custom css creates a conflict in your site. If you want have a fixed top menu, please go to X > Launch > Options > Headers > Navbar instead. You can choose “Fixed Top” as the navbar position for your site.

Hope this helps.

[hestiastadservice]

Hi thanks for your answer if I would like to have a transparent navbar with a bigger logo that shrinks when scrolling down on the page, and the navbar should go to a fixed position but not transparent, is this possible to do in themeco x.
If you want I can post my site name so you can see how it looks today, also i can post a link to a site that has this kind of future.

Also, another problem I have is in my top menu, I have made my own link custum link / # contact so that by clicking on it the front page scrolls to the bottom of the front page where I have my contact information.
The problem here is not the function but the buttons (kontakta oss) color which is colored all the time when you are on the front page. I would if its possible to let the button (kontakta oss) change color first after you press on it. see attched file

thanks

[friech]

Hi There,

Please navigate to Theme Options > Ethos and set the NAVBAR BACKGROUND COLOR to transparent.

Then add this to Theme Options > JS

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() >50) {
              $('.x-navbar').addClass("x-navbar-solid");
          		
        }else {
              
          $('.x-navbar').removeClass("x-navbar-solid");
        }
    });
});

And then this to Theme Options > CSS

body .x-navbar-solid {
	background-color:red;  
	transition: background-color 0.8s ease-in-out;
}

But before you do that, please remove this codes from your Theme Options > CSS because these are not CSS codes and will cause the other CSS not to work.

Regarding the “kontakta oss” menu, please have the href as #contact only, not an absolute link like http://yourdomain.com/#contact

Thanks,