Menu, background image, and aligning

Hello I need help with the following,

  1. how to get rid of the white back ground so the menu is transparent.
  2. how to get rid of “Fort knox laser tag” in the menu on the top left
  3. how to make the background image fit the screen. I made my image 1920 X 1080 pixels and it isn’t taking over the whole space
  4. how to have heading H1 I don’t see that like the old cornerstone used to have… It just says headline in the elements. Also how can I make the headline text bigger?
  5. how to make the second section with four images touching with no space and go to edge to edge of the screen (see attached image for an example.)
  6. how to make the slider images bigger take up the width of the screen from edge to edge?

Thanks for all the help.

four images touching

Hello There,

Thanks for writing in!

1.) To make the menu transparent, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.home .x-navbar {
    background-color: transparent;
    position: fixed;
    width: 100%;
    border: none;
    box-shadow: none;
}

2.) To remove the laser tag title, please upload an image logo. If you do not want to have a text logo or image logo, please use this code:

.home .x-brand {
  display: none;
}

3.) Please understand how background images works. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

If you want to have a section where you can display a bigger image, please set a minimum height of at least 100vh in your column containing the “Laser Tag Like Never Before” headline so that you can display at least 1920x1800 image on a large screen.

4.) Please use the Classic custom headline instead. With the headline element, you will have to select the tag: https://prnt.sc/k127l1

And to increase the font size, find the text format in your headline settings: http://prntscr.com/k127p7

5.) Please insert a new section and a row with four columns. In the row settings, disable the inner container and enable the marginless column option so that you can make the second section with four images touching with no space and go to edge to edge of the screen.

6.) Please install Revolution Slider plugin. You can find this in X > Validation > Extensions. To know more about this plugin, please check this out: https://theme.co/apex/forum/t/extension-revolution-slider/71

Once installed, you can check out this video tutorial on how you can make an fullscreen auto responsive slider:

Hope this helps.

Thanks for the help.

  1. Confused as to where to enter the 100vh?

  2. How can i make no padding between two sections? I made the padding 0 but there is still some space.?

  3. Where do i add the logo?

Hi @fortknoxusa,

  1. Please inspect your column where Laser Tag Like Never Before is, and set its minimum height to 100vh.

a. Inspect the column
b. Go to customize section
c. Click Element CSS, and add this CSS

$el {
min-height: 100vh;
}
  1. Have you tried setting the margin 0 too? If yes, please provide the URL that has this issue?

  2. You can do that in Theme Options > Header > LOGO – IMAGE.

Thanks!

Thnaks,

1.How can I move the logo to the left and move the menu to the right more?

  1. Also how do I get rid of the red line above each menu item? and that black triangle in the upper right that has a + on it.

  2. How to move the headline more to the left?

4.Is it possible to have a menu that is hamburger

Hi Justin,

  1. Please add this to Theme Options > CSS
.x-navbar .x-container.width {
	width: 100%;
    max-width:none;
}

To remove the red line above the active and hovered menu item, please add this as well.

.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
	box-shadow: none !important;
}

To remove that triangle toggle on the upper-right, please navigate to Theme Options > Header and set the Header Widget Areas option to None.



  1. Please inspect the ROW where that headline is placed, then turn OFF the Inner Container option of that ROW.



Regretfully mobile toggle shows up only on mobile. It could be possible with custom development or 3rd party plugins, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.