Sticky menu problem + other css

Hello,

The website I’m working on is http://trenerpoznan.esy.es/

  1. I set the menu bar below the heading image. The problem is that starts showing when I scroll down, below the image. On your demo works diferently, which is my goal.
    The other thing is, that when I scroll up, the menu bar keeps showing almost all the way up, which is incorrect too.

  2. How to enable mobile menu later when the screen is smaller, around 500px width? Also I would like to remove the mobile button and keep all items visible at all times, as it’s on http://www.vidveramassage.com/

  3. How to remove the underline of block headings?

  4. I used Page Builder/Layout Buider to create two columns in my Contact section. Now the heading is only centered to the first column, not the whole row. Is there any other way to use those two widgets in one row and have everything even?

  5. How to remove the borders and gaps after rows with Layout Builder?

Thanks in advance.

Hi,

  1. Have you done any custom coding to the menu? How I see you don’t have menu by default under your Header image.

  2. You can display the mobile menu only from 500px with this Custom CSS:

@media screen and (max-width: 991px) {
.menu-toggle, .main-navigation.toggled .nav-menu {
    display: none;
}

.main-navigation ul {
    display: inline-block !Important;
    float: right !important;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation li {
    width: auto !important;
    padding: 5px 10px !important;
}

.main-navigation {
    float: right !important;
}
}

@media screen and (max-width: 500px) {
.menu-toggle, .main-navigation.toggled .nav-menu {
    display: block !important;
}

.main-navigation {
    display: none !important;
}
}
  1. You can remove the lines from below the Block Headings:
.panel.widget .widget-title:after, .so-panel.widget .widget-title:after {
    display: none !important;
}
  1. The title is not centered because you have used that title for the widget.

  2. You can remove the border-bottom with this Custom CSS:

.panel-grid {
    border-bottom: 0 !important;
}

Add the above CSS’ to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba,

thank you for your reply. Some of your suggestions worked, some didn’t.

My style.css in child theme by now looks like this:

/*
Theme Name:   	moesia_potomek
Description:  	Potomek motywu Moesia do modyfikacji cssów itp
Template:		moesia
*/

@import url('../moesia/style.css');

/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/

@media screen and (min-width: 992px) {
    .top-bar {
        background-color: rgba(255,255,255,0) !important;
        position: fixed;
    }

div#undefined-sticky-wrapper {
        background-color: transparent;
        position: absolute;
    }

    div#undefined-sticky-wrapper.is-sticky {
        left: 0;
    }
	.is-sticky .main-navigation li {
		padding: 20px 10px;
		-webkit-transition: none;
		transition: none;			
	}
}

/*--------------------------------------------------------------
Responsive
--------------------------------------------------------------*/

@media screen and (max-width: 991px) {
.menu-toggle, .main-navigation.toggled .nav-menu {
    display: none;
}

.main-navigation ul {
    display: inline-block !Important;
    float: right !important;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation li {
    width: auto !important;
    padding: 5px 10px !important;
}

.main-navigation {
    float: right !important;
}
}

@media screen and (max-width: 500px) {
.menu-toggle, .main-navigation.toggled .nav-menu {
    display: block !important;
}

.main-navigation {
    display: none !important;
}
}

/*--------------------------------------------------------------
Welcome area
--------------------------------------------------------------*/
.welcome-title,
.welcome-desc {
	color: #ffffff;
	margin-top: 150px;
	text-shadow: none;
}

.welcome-logo {
	position: absolute;
	top: 10px;
	float: left;
    	
}

/*--------------------------------------------------------------
Contact form 7
--------------------------------------------------------------*/

input[type="submit"] {
background-color: #3A3A3A;
box-shadow: 0 5px 0 #000000;

/* Better support for third party widgets */

.panel.widget .widget-title:after, .so-panel.widget .widget-title:after {
    display: none !important;
}

.panel-grid {
    border-bottom: 0 !important;
}
  1. Worked great!
  2. Applied but it doesn’t change anything.
  3. When I don’t use my own title this widget adds it’s own “Contact Us”.
  4. Applied but it doesn’t change anything.

I appreciate your help. This forum and support works really great.

Regards,

Kasia

Hi,

  1. I guess the problem is with this Custom CSS, please try to remove it:
.top-bar {
        background-color: rgba(255,255,255,0) !important;
        position: fixed;
    }
  1. Then please try this one:
.widget-title:after {
    display: none !important;
}
  1. That widget title can be removed with some Custom CSS, but if you use the widget title, then it will be in the top of the widget, not on top of the Row.

  2. Please try to move this CSS to the top of the style.css:

.panel-grid {
    border-bottom: 0 !important;
}

or if this one and the other one from point 3 will not work on top of style.css, then add them using the Simple Custom CSS plugin I have suggested above.

Best Regards,
Csaba

Hello,

Thank you for your suggestions. I hid the most part of my top-bar customization, which was added before to put the menu on a very top.
Also I used Simple Custom CSS plugin, which for some reason worked, unlike adding code into child theme.

Thank you for all your help.

Hi,

Great! You’re most welcome! I’m glad it’s resolved! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba