Question

我正在建立一个网站，所以我可以练习我的网络技能，但我遇到了问题。问题是当网页在移动设备上时，例如导航栏崩溃，因此它适合设备，但是当他们点击导航栏切换按钮时，链接会超过我拥有的标题的顶部，我不想要这发生了。我想要发生的是当他们点击它时，如果你理解我的意思，它会将所有元素向下移动。

如果您不想访问此网站 - ＆gt; www.thestartupguys.co.uk＆lt; - 缩小页面，直到它变为你必须切换导航栏然后切换它的位置，然后你看到标题图像向下移动。

Standard CSS Custom CSS

Answer 1

这些规则导致了它：见工作示例。

删除高度：50和margin-top：20px

WebElement txt= driver.findElement(By.xpath("//*[@id='full-scorecard']/div[2]/div/table[1]/tbody/tr[3]/td[2]"));

System.out.println(txt.getText());

删除高度：90px

.navbar-brand img,
.navbar-nav {
    margin-top: 20px;
    display: inline;
    text-transform: uppercase;
    height: 50px;
}

.navbar-default {
    font-family: 'Raleway', sans-serif;
    height: 90px;
    background-color: #fff;
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.25);
}

@import url(https://fonts.googleapis.com/css?family=Raleway:100, 200, 300, 400, 500, 600, 700, 800, 900);
@import url(https://fonts.googleapis.com/css?family=Lato);

/*!
Main Page CSS || Created By Stephen Hinett | Crafted-Solutions
 */

* {
  margin: 0px;
  padding: 0px;
}
/*
 
* BASIC STYLE
- Headers and Paragraphs
 
* GLOBAL STYLE
- Navbar
- Header
 
*/

/*===========================================================================================*/

/* Headings & Paragraphs ------------------------- */

/*===========================================================================================*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Raleway', sans-serif, serif;
  color: #474747;
}
p {
  color: #9E9E9E;
  font-family: 'Raleway', sans-serif, serif;
}
/*===========================================================================================*/

/* Navbar ------------------------- */

/*===========================================================================================*/

.navbar.navbar-default {
  font-family: 'Raleway', sans-serif;
  background-color: #fff;
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.25);
}
.navbar.navbar-default .navbar-nav {
  font-size: 0.9em;
}
.navbar .navbar-brand img,
.navbar-nav {
  display: inline;
  text-transform: uppercase;
  height: 50px;
}
.navbar.navbar-default .navbar-nav>li.active>a {
  font-weight: 600;
  text-decoration: underline;
}
.navbar.navbar-default .navbar-nav>li>a:hover,
.navbar.navbar-default .navbar-nav>li>a:focus {
  font-weight: 600;
  background-color: transparent;
  text-decoration: underline;
}
/*===========================================================================================*/

/* Header ------------------------- */

/*=

Answer 2

替换此CSS

nav.mobile_menu {
background-color: #fff;
display: none;
float: left;
left: -15px;
overflow: hidden;
padding: 0 15px;
position: absolute;
text-align: left;
top: 100px;
width: 100%;

}

单击Navbar-Toggle按钮使页面向下移动

2 个答案: