[BroCodesParticipant]

Hi there i would like to do the following: (all in mobile view not desktop view)
Website/URL: Mykepimm.com

1. Fix the Nav button
2. remove the space above and below the menu drop down

1 Fix the Nav Button
– View website on mobile device “Mykepimm.com”
– scroll down the page
– the Nav button (burger looking button) to stay fixed and the main heading of the page (The Pimm) to be static e.g. scroll off the page

2. remove the space above and below the menu drop down
– when you click on the menu button (the menu shows)
– above the first item (Portfolio) and below the last item (Contact Me) there are big spaces, can you remove this and just keep the padding?

Here is the current CSS code that i have added in:

.x-nav-wrap.mobile.collapse.in {
  background-color: rgba(0,0,0,0.7);
  display: inline-block;
  float:right;
  text-align:center;
  padding: 20px;
}

.x-navbar {
    position:absolute;
    width:100%;
    top:0;
    background-color:transparent;
    -moz-box-shadow:    none;
    -webkit-box-shadow: none;
    box-shadow:         none;
    border-bottom:none;
}

.x-navbar .x-brand {
    color: #000;
}

.x-navbar .desktop .x-nav > li > a {
    color: #000;
}

.x-navbar.x-navbar-fixed-top {
    color: #000;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
    color: #000;
}

help me please.

[ChristopherModerator]

Hi there,

#1 To fixed the menu button you should fixed the navabr and ‘The pimm’ is located in navbar, so there is no easy way to fix menu button without fixing logo text.

.x-navbar.x-navbar-fixed-top {
    position: fixed;
}

#2 Please add this as well :

.x-navbar .mobile .x-nav {
    margin: 0px 0;
}

Hope that helps.

[BroCodesParticipant]

Ok thank you very much for your quick response.
there is one last thing:

Problem: The website isn’t loading correctly straight away.
e.g.
– go to mobile view
– reload my webpage
– most of the time the background does not load correctly and the “Card” overlaps the bottom of the section (background image)

is there a way to ensure that the page always loads correctly?

Side Note: if you turn your phone from landscape to portrait and vice versa the problem is fixed.

also how do you increase the size of the Main menu text on the desktop view?
and how do you add spacing between them?

thanks

[ChristopherModerator]

Hi there,

Are you referring to background image in section 1 ?

Please add this :

@media (max-width:767px){
.x-section.bg-image.parallax, .x-section.bg-pattern.parallax {
    background-position: top center !important; 
    background-size: contain !important;
}
}

We released update for both X and Cornerstone, please update them.

Hope it helps.

[BroCodesParticipant]

Hi 😀 thanks for the response:

– Yes i am referring to the background image in section 1
– I have updated X Theme
– Thank you, that worked perfectly for the desktop views but not mobile, tablet views.
– Now the background image does not look good in smaller screens e.g. (mobile, tablet etc)

can you help fix this?

[RadModerator]

Hi there,

That css is actually for mobile view and not for desktop. If it doesn’t look good on mobile, then you can remove it. And parallax is actually disabled on mobile.

Thanks!

[BroCodesParticipant]

There are still issues with my website.
can you tell me why the top “Background” imaged does not load correctly?
the spacing of each section looks wrong.
but when you resize the browser then make it full size again it corrects its self.

please help.

Incorrect view:
https://www.dropbox.com/s/oi1msdsgbbxxt8r/Home%20Screen.JPG?dl=0

Correct View:
https://www.dropbox.com/s/lkq7ftwdpywit3t/Correct%20view.JPG?dl=0

[John EzraMember]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

div#x-section-1 {
    padding: 70px 0px 110px!important;
    background-position: 50% -160px!important;
}

div#x-section-1.x-section.bg-image.parallax {
        background-attachment: inherit;
}

Hope this helps – thanks!

[Author]

Posts